这篇文章主要介绍了 js 实现同一页面多个运动效果的方法, 涉及 javascript 操作页面元素运动效果的技巧, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现同一页面多个运动效果的方法。分享给大家供大家参考。具体分析如下:
实现原理,就是在调用的时候,给这五个元素,循环加上事件。需要注意的是,每个元素的定时器需要分开。
要点一:
- var speed = (target - obj.offsetWidth)/8;
缓冲运动效果,一开始速度很快,然后越来越慢,直到停止
- speed = speed>0?Math.ceil(speed):Math.floor(speed);
如果速度大于 0,则向上取整,如果速度小于 0,则向下取整。
要点二:
- if(obj.offsetWidth == target){
- clearInterval(obj.timer);
- }else{
- obj.style.width = obj.offsetWidth+speed+"px";
- }
元素宽度和目标值比较,如果相等,关闭定时器,否则,宽度继续增加。
要点三:
- for(i=0; i<runs_li.length; i++){
- runs_li[i].timer = null;
- runs_li[i].onmouseover = function(){
- startrun(this,300);
- }
- runs_li[i].onmouseout = function(){
- startrun(this,80);
- }
- }
给每个元素加上各自的定时器属性,各自的鼠标事件,在鼠标事件中调用运动函数。
最后,上代码:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无标题文档
- </title>
- <style>
- body,ul,li{margin:0; padding:0;} #runs li{width:80px; height:80px; background:#06c;
- list-style:none; position:absolute; left:0;}
- </style>
- <script>
- window.onload = function() {
- var runs = document.getElementById("runs");
- var runs_li = runs.getElementsByTagName("li");
- var i = 0;
- for (i = 0; i < runs_li.length; i++) {
- runs_li[i].timer = null;
- runs_li[i].onmouseover = function() {
- startrun(this, 300);
- }
- runs_li[i].onmouseout = function() {
- startrun(this, 80);
- }
- }
- }
- function startrun(obj, target) {
- clearInterval(obj.timer);
- obj.timer = setInterval(function() {
- var speed = (target - obj.offsetWidth) / 8;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if (obj.offsetWidth == target) {
- clearInterval(obj.timer);
- } else {
- obj.style.width = obj.offsetWidth + speed + "px";
- }
- document.title = obj.offsetWidth + ',' + target;
- },
- 30);
- }
- </script>
- </head>
- <body>
- <ul id="runs">
- <li style="top:0">
- 1
- </li>
- <li style="top:90px;">
- 2
- </li>
- <li style="top:180px;">
- 3
- </li>
- <li style="top:270px;">
- 4
- </li>
- <li style="top:360px;">
- 5
- </li>
- </ul>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: