标题:[推荐]符合牛顿运动定率的跟随鼠标文字,特NB
取消只看楼主
好学
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
帖 子:622
专家分:318
注 册:2004-5-4
结帖率:50%
 问题点数:0 回复次数:1 
[推荐]符合牛顿运动定率的跟随鼠标文字,特NB

我比较讨厌一些网页特效,比如鼠标跟随文字 但是 自从我见到这个鼠标跟随文字就深深的爱上了她 http://gs55.01ww.org/牛顿/111.html

代码:
111.html <html> <head> <STYLE type=text/css> .mousetail { position: absolute; height: 14; width: 14; color: red; } </STYLE> <title></title> </head> <body> <!-- //鼠标跟随文字// --> <div id="dot0" class="mousetail"> </div> <div id="dot1" class="mousetail">符</div> <div id="dot2" class="mousetail">合</div> <div id="dot3" class="mousetail">牛</div> <div id="dot4" class="mousetail">顿</div> <div id="dot5" class="mousetail">运</div> <div id="dot6" class="mousetail">动</div> <div id="dot7" class="mousetail">定</div> <div id="dot8" class="mousetail">率</div> <div id="dot9" class="mousetail">的</div> <div id="dot10" class="mousetail">跟</div> <div id="dot11" class="mousetail">随</div> <div id="dot12" class="mousetail">鼠</div> <div id="dot13" class="mousetail">标</div> <div id="dot14" class="mousetail">文</div> <div id="dot15" class="mousetail">字</div> <div id="dot16" class="mousetail">●</div> <script src="mouse.js"></script> </html>

mouse.js var nDots = 17;//字符数 var Xpos = 170;//初始屏距,X轴 var Ypos = 50;//初始屏距,Y轴

var DELTAT = .01; var SEGLEN = 8;//字间距 var SPRINGK = 10;//弹性值 var MASS = 1;//字距倍数 var GRAVITY = 40;//重力 var RESISTANCE = 9;//阻力(越大越慢) var STOPVEL = 0.1; var STOPACC = 0.1; var DOTSIZE = 15;//未知尺寸 var BOUNCE = 0.75;//反弹 var isNetscape = navigator.appName=="Netscape"; var followmouse = true; var dots = new Array(); init(); function init() { var i = 0; for (i = 0; i < nDots; i++) { dots[i] = new dot(i); } if (!isNetscape) { // I only know how to read the locations of the // <LI> items in IE //skip this for now // setInitPositions(dots) } for (i = 0; i < nDots; i++) { dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } if (isNetscape) { startanimate(); } else { // let dots sit there for a few seconds // since they're hiding on the real bullets setTimeout("startanimate()", 1);//进来反应时间 } } function dot(i) { this.X = Xpos; this.Y = Ypos; this.dx = 0; this.dy = 0; if (isNetscape) { this.obj = eval("document.dot" + i); } else { this.obj = eval("dot" + i + ".style"); } } function startanimate() { setInterval("animate()", 20);//反弹到停止的时间(速度) } function setInitPositions(dots) { var startloc = document.all.tags("LI"); var i = 0; for (i = 0; i < startloc.length && i < (nDots - 1); i++) { dots[i+1].X = startloc[i].offsetLeft startloc[i].offsetParent.offsetLeft - DOTSIZE; dots[i+1].Y = startloc[i].offsetTop + startloc[i].offsetParent.offsetTop + 2*DOTSIZE; } dots[0].X = dots[1].X; dots[0].Y = dots[1].Y - SEGLEN; } function MoveHandler(e) { Xpos = e.pageX; Ypos = e.pageY; return true; } function MoveHandlerIE() { Xpos = window.event.x + document.body.scrollLeft; Ypos = window.event.y + document.body.scrollTop; } if (isNetscape) { document.captureEvents(Event.MOUSEMOVE); document.onMouseMove = MoveHandler; } else { document.onmousemove = MoveHandlerIE; } function vec(X, Y) { this.X = X; this.Y = Y; }

// adds force in X and Y to spring for dot[i] on dot[j] function springForce(i, j, spring) { var dx = (dots[i].X - dots[j].X); var dy = (dots[i].Y - dots[j].Y); var len = Math.sqrt(dx*dx + dy*dy); if (len > SEGLEN) { var springF = SPRINGK * (len - SEGLEN); spring.X += (dx / len) * springF; spring.Y += (dy / len) * springF; } } function animate() { var start = 0; if (followmouse) { dots[0].X = Xpos; dots[0].Y = Ypos; start = 1; } for (i = start ; i < nDots; i++ ) { var spring = new vec(0, 0); if (i > 0) { springForce(i-1, i, spring); } if (i < (nDots - 1)) { springForce(i+1, i, spring); } var resist = new vec(-dots[i].dx * RESISTANCE, -dots[i].dy * RESISTANCE); var accel = new vec((spring.X + resist.X)/ MASS, (spring.Y + resist.Y)/ MASS + GRAVITY); dots[i].dx += (DELTAT * accel.X); dots[i].dy += (DELTAT * accel.Y); if (Math.abs(dots[i].dx) < STOPVEL && Math.abs(dots[i].dy) < STOPVEL && Math.abs(accel.X) < STOPACC && Math.abs(accel.Y) < STOPACC) { dots[i].dx = 0; dots[i].dy = 0; } dots[i].X += dots[i].dx; dots[i].Y += dots[i].dy; var height, width; if (isNetscape) { height = window.innerHeight + document.scrollTop; width = window.innerWidth + document.scrollLeft; } else { height = document.body.clientHeight + document.body.scrollTop; width = document.body.clientWidth + document.body.scrollLeft; } if (dots[i].Y >= height - DOTSIZE - 1) { if (dots[i].dy > 0) { dots[i].dy = BOUNCE * -dots[i].dy; } dots[i].Y = height - DOTSIZE - 1; } if (dots[i].X >= width - DOTSIZE) { if (dots[i].dx > 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = width - DOTSIZE - 1; } if (dots[i].X < 0) { if (dots[i].dx < 0) { dots[i].dx = BOUNCE * -dots[i].dx; } dots[i].X = 0; } dots[i].obj.left = dots[i].X; dots[i].obj.top = dots[i].Y; } }

搜索更多相关主题的帖子: 运动 跟随 文字 鼠标 牛顿 
2004-12-28 22:56
好学
Rank: 16Rank: 16Rank: 16Rank: 16
等 级:版主
帖 子:622
专家分:318
注 册:2004-5-4
得分:0 
我加的文字过多,有些拖拉,10个文字左右效果最佳,其中的一些物理参数可以在mouse.js中定义.
2004-12-28 22:57



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-10247-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.336977 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved