这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现多物体缓冲运动实例代码,有需要的朋友可以参考一下
效果:
思路:
利用 setInterval 计时器进行运动,offsetWidth 实现宽度的变动,在用 onmouseover 将终点和所选中的 DIV 放入参数再进行缓冲运动。
代码:
- <head runat="server">
- <title>
- </title>
- <style type="text/CSS">
- div { width: 100px; height: 50px;
- background: #0000FF; margin: 10px; }
- </style>
- <script type="text/javascript">
- window.onload = function() {
- var oDiv = document.getElementsByTagName('div');
- for (var i = 0; i < oDiv.length; i++) { oDiv[i].timer = null; //给买个DIV做个标记,用以关闭相应DIV的定时器
- oDiv[i].onmouseover = function() { move(this, 400); //给定时器输出参数
- } oDiv[i].onmouseout = function() { move(this, 100);
- }
- }
- };
- function move(div, end) { clearInterval(div.timer); div.timer = setInterval(function() {
- var speed = (end - div.offsetWidth) / 5; //(终点-要走的宽度)/缩放系数=DIV移动的速度
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //小数取整,也就是进位取整
- if (div.offsetWidth == end) { //当到达终点时关闭计时器
- clearInterval(div.timer);
- }
- else { div.style.width = div.offsetWidth + speed + 'px'; //移动DIV的宽度
- }
- },
- 30)
- }
- </script>
- </head>
- <body>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- </body>
来源: http://www.phperz.com/article/17/0625/278098.html