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

JavaScript07

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

新建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=0i<360i+=20){

var O = OO

for(var j=10j<35j+=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 = 0i <Ni++) 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>

这是一个拖动元素的效果

<div id="div" style="width:100pxheight:100pxbackground-color:redposition: absolutecursor: 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>