javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.相关的知识，希望对你有一定的参考价值。
页面上有许多点一直跟随着鼠标指针的移动,或者是其他东西如许多个小圆球等一直跟随着鼠标指针的移动。如何实现这个效果.
参考技术A 新建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;i<360;i+=20)
var O = OO;
for(var j=10; j<35; 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特效问题 页面上有许多点一直跟随着鼠标指针的移动。如何实现这个这个效果.的主要内容，如果未能解决你的问题，请参考以下文章
JavaScript制作页面时常用的五个特效------你用到了吗？