javascript跟随,javascript跟随鼠标移动

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

一个关于Javascript 文字跟随鼠标移动的问题

eval是为了 创建一个 span+i+.style :例如:

span1.style

span2.style

span3.style

span4.style

span5.style

……

第i个span对象的style的属性的引用然后赋值给thisspan 。只能这样写，因为i是变量。

至于那个括号，加不加都一样，我没看出什么意义来。

你问的问题就像：

这段代码里：i=message.length-1;

为什么不写成imessage.length呢？i和message.length都是正整数或0。

javascript怎么实现鼠标点击一张图片之后，图片跟随鼠标走的效果

这是一个拖动元素的效果

div id="div" style="width:100px;height:100px;background-color:red;position: absolute;cursor: move"

/div

script

window.onload=function(){

var div=document.getElementById("div");

div.onmousedown=function(e){ //把onmousedown改成onclick就是你要的效果

var x= e.clientX-div.offsetLeft;

var y= e.clientY-div.offsetTop;

document.onmousemove=function(e){

div.style.left= e.clientX-x+"px";

div.style.top= e.clientY-y+"px";

}

document.onmouseup=function(){

document.onmousemove=null;

}

}

}

/script