javascript圆球,js画圆形

javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.

新建html复制黏贴运行即可

创新互联建站作为成都网站建设公司，专注网站建设公司、网站设计，有关成都定制网页设计方案、改版、费用等问题，行业涉及塔吊租赁等多个领域，已为上千家企业服务，得到了客户的尊重与认可。

html

head

title鼠标跟随效果/title

style type="text/css"

html {

overflow: hidden;

}

body {

position: absolute;

height: 100%;

width: 100%;

margin:0;

padding:0;

}

#screen {

background:#000;

position: absolute;

width: 100%;

height: 100%;

}

#screen span {

background: #fff;

font-size: 0;

overflow: hidden;

width: 2px;

height: 2px;

}

/style

script type="text/javascript"

var Follow = function () {

var $ = function (i) {return document.getElementById(i)},

addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})},

OBJ = [], sp, rs, N = 0, m;

var init = function (id, config) {

this.config = config || {};

this.obj = $(id);

sp = this.config.speed || 4;

rs = this.config.animR || 1;

m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5};

this.setXY();

this.start();

}

init.prototype = {

setXY : function () {

var _this = this;

addEvent(this.obj, 'mousemove', function (e) {

e = e || window.event;

m.x = e.clientX;

m.y = e.clientY;

})

},

start : function () {

var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn;

OBJ[N++] = OO = new CObj(null, 0, 0);

for(var i=0;i360;i+=20){

var O = OO;

for(var j=10; j35; j+=1){

var x = fn(i, j).x,

y = fn(i, j).y;

OBJ[N++] = o = new CObj(O , x, y);

O = o;

}

}

setInterval(function() {

for (var i = 0; i N; i++) OBJ[i].run();

}, 16);

}

}

var CObj = function (p, cx, cy) {

var obj = document.createElement("span");

this.css = obj.style;

this.css.position = "absolute";

this.css.left = "-1000px";

this.css.zIndex = 1000 - N;

document.getElementById("screen").appendChild(obj);

this.ddx = 0;

this.ddy = 0;

this.PX = 0;

this.PY = 0;

this.x = 0;

this.y = 0;

this.x0 = 0;

this.y0 = 0;

this.cx = cx;

this.cy = cy;

this.parent = p;

}

CObj.prototype.run = function () {

if (!this.parent) {

this.x0 = m.x;

this.y0 = m.y;

} else {

this.x0 = this.parent.x;

this.y0 = this.parent.y;

}

this.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp;

this.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp;

this.css.left = Math.round(this.x) + 'px';

this.css.top = Math.round(this.y) + 'px';

}

return init;

}();

/script/head

body

div id="screen"/div

script type="text/javascript"

new Follow('screen', {speed: 4,

animR : 2,

fn : function (i, j) {

return {

x : j/4*Math.cos(i),

y : j/4*Math.sin(i)

}

}})

/script/body

/html

如何用js使小球来回弹动

你好，

可以通过判断小球边缘和窗口高度来实现

例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。

来回弹动关键在于 对边缘的判断，和速度方向的判断和计算

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。

选择用纯css分成四段控制动画，最终效果如图：

详细分析：

创建HTML：

HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。

div class="layout"

div class="point"/div

/div

核心css：

去掉了浏览器兼容用的代码。

把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。

最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

}

}

完整代码:

html

head

style 

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0 auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/* Chrome: */

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/* Firefox: */

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/* Opera: */

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

-ms-transform:rotate(360deg);  /* IE 9 */

-moz-transform:rotate(360deg);  /* Firefox */

-webkit-transform:rotate(360deg); /* Chrome */

-o-transform:rotate(360deg);  /* Opera */

}

}

/style

/head

body

div class="layout"

div class="point"/div

/div

/body

/html