<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px height:100px background:red position:absolute}
</style>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>无标题文档</title>
<script>
document.onmousemove=function (ev)
{
var oEvent=ev||event
var oDiv=document.getElementById('div1')
oDiv.style.left=oEvent.clientX+'px'
oDiv.style.top=oEvent.clientY+'px'
}
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
你随便弄个网页以下代码插入<head>标签之内，保存预览，就可以看到很漂亮的文字环绕鼠标：
<SCRIPT
LANGUAGE="JavaScript">
if
(document.all)
{
yourLogo
=
//自己根据要求设置//
logoFont
=
"宋体"
logoColor
=
"#00ccff"
yourLogo
=
yourLogo.split('')
L
=
yourLogo.length
TrigSplit
=
360
/
L
Sz
=
new
Array()
logoWidth
=
100
logoHeight
=
-30
ypos
=
0
xpos
=
0
step
=
0.03
currStep
=
0
document.write('<div
id="outer"
style="position:absolutetop:0pxleft:0px"><div
style="position:relative">')
for
(i
=
0
i
<
L
i++)
{
document.write('<div
id="ie"
style="position:absolutetop:0pxleft:0px'
+'width:10pxheight:10pxfont-family:'+logoFont+'font-size:12px'
+'color:'+logoColor+'text-align:left">'+yourLogo[i]+'</div>')
}
document.write('</div></div>')
function
Mouse()
{
ypos
=
event.y
xpos
=
event.x
-
5
}
document.onmousemove=Mouse
function
animateLogo()
{
outer.style.pixelTop
=
document.body.scrollTop
for
(i
=
0
i
<
L
i++)
{
ie[i].style.top
=
ypos
+
logoHeight
*
Math.sin(currStep
+
i
*
TrigSplit
*
Math.PI
/
180)
ie[i].style.left
=
xpos
+
logoWidth
*
Math.cos(currStep
+
i
*
TrigSplit
*
Math.PI
/
180)
Sz[i]
=
ie[i].style.pixelTop
-
ypos
if
(Sz[i]
<
5)
Sz[i]
=
5
ie[i].style.fontSize
=
Sz[i]
/
1.7
}
currStep
-=
step
setTimeout('animateLogo()',
20)
}
window.onload
=
animateLogo
}
</script>
新建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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）