javascript关于运动的各种问题经典总结_javascript技巧

本文实例总结了javascript关于运动的各种问题。分享给大家供大家参考。具体如下：

一、JS运动的各种问题

问题一：

错误代码：

function startMove(){
 var timer=null;
 var div1=document.getElementById("div1");
 if (div1.offsetLeft==300){
  clearInterval(timer);
 }else{
  timer=setInterval(function(){
   div1.style.left=div1.offsetLeft+10+"px";
  },30)
 }
}

希望实现的功能：

打开定时器timer，让div1运动到300px，然后让div1停下即关掉定时器。

错误之处：

if语句错误，代码首先设置一个null定时器timer，然后如果div1的左边距为300px，则关掉定时器timer。否则一直运动。但是if并不是循环语句，if语句执行一次之后将不再执行。所以永远不会关闭定时器。

正确代码：

var timer=null;
function startMove(){
 var div1=document.getElementById("div1");
 timer=setInterval(function(){
  if (div1.offsetLeft==300){
   clearInterval(timer);
  }
  div1.style.left=div1.offsetLeft+10+"px";
 },30)
}

问题二:
错误代码：

function startMove(){
 var speed=1;
 var timer=null;
 var oDiv1=document.getElementById("div1");
 clearInterval(timer);
 timer=setInterval(function(){
  if (oDiv1.offsetLeft>=300){
   clearInterval(timer);
  }else{
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
  }
 },30)
}

希望实现的功能：

连续点击开始按钮，div1会加速，这是因为每当点击按钮一次，就会开启一个定时器，累积起来就会加速，所以要在开启定时器之前不管有没有定时器开启都要先关闭一次定时器。但是添加了关闭定时器的clearInterval方法之后，依然会加速。
错误之处：
将timer变量放在了startMove方法里面，相当于每点击一次按钮，就会执行一次startMove方法，生成了一个闭包，因此创建了一个局部timer，每一个闭包当中的timer并不会共享，所以还是相当于生成了点击次数的闭包timer。

正确代码：

var timer=null;
function startMove(){
 var speed=1;
 var oDiv1=document.getElementById("div1");
 clearInterval(timer);
 timer=setInterval(function(){
  if (oDiv1.offsetLeft>=300){
   clearInterval(timer);
  }else{
   oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
  }
 },30)
}

实现分享栏进出功能：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #div1{
   width: 150px;
   height: 200px;
   background: burlywood;
   position: absolute;
   left: -150px;
  }
  span{
   width: 20px;
   height: 60px;
   position: absolute;
   background: gold;
   right: -20px;
   top: 70px;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById("div1");
   oDiv1.onmouseover=function(){
    move(0);
   };
   oDiv1.onmouseout=function(){
    move(-150);
   };
  };
  var timer=null;
  function move(target){
   var oDiv1=document.getElementById("div1");
   var speed=0;
   if (oDiv1.offsetLeft<target){
    speed=10;
   }else{
    speed=-10;
   }
   clearInterval(timer);
   timer=setInterval(function(){
    if(oDiv1.offsetLeft==target){
     clearInterval(timer);
    }else{
     oDiv1.style.left=oDiv1.offsetLeft+speed+"px";
    }
   },30);
  }
 </script>
</head>
<body>
<div id="div1">
 <span id="span1">分享到</span>
</div>
</body>
</html>

实现图片淡入淡出功能：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 200px;
   height: 200px;
   background: red;
   position: absolute;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById("div1");
   oDiv1.onmouseover=function(){
    move(100);
   };
   oDiv1.onmouseout=function(){
    move(30);
   };
  };
  var timer=null;
  var alpha=30;
  function move(target){
   var oDiv1=document.getElementById("div1");
   var speed=0;
   clearInterval(timer);
   if(alpha<target){
    speed=10;
   }else{
    speed=-10;
   }
   timer=setInterval(function(){
    if (alpha==target){
     clearInterval(timer);
    }else{
     alpha+=speed;
     oDiv1.style.filter="alpha(opacity:"+alpha+")";
     oDiv1.style.opacity=alpha/100;
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

注意点：

1.因为在透明度上JavaScript并没有像左边距（offsetLeft）这样的属性。所以用一个alpha变量代替。
2.JavaScript代码中的行间透明度设置上需要考虑浏览器的兼容问题，ie浏览器设置方法为oDiv1.style.filter="aplha(opacity:"+aplha+")"；
  chrome和火狐为oDiv1.style.opacity=alpha/100。
实现滚动条事件：
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
  #div1{
   width: 100px;
   height: 100px;
   background: yellowgreen;
   position: absolute;
   bottom: 0px;
   right: 0px;
  }
 </style>
 <script>
  window.onscroll=function(){
   var oDiv=document.getElementById("div1");
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   move(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
  };
  var timer=null;
  function move(target){
   var oDiv=document.getElementById("div1");
   clearInterval(timer);
   timer=setInterval(function(){
    var speed=(target-oDiv.offsetTop)/10;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (oDiv.offsetTop==target){
     clearInterval(timer);
    }else{
     oDiv.style.top=oDiv.offsetTop+speed+'px';
    }
   },30)
  };
 </script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>

二、JS多物体运动的各种问题

问题一：

希望实现的功能：三个平行div自由的平行缩放。
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 100px;
   height: 50px;
   background: yellow;
   margin: 10px;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv=document.getElementsByTagName('div');
   for (var i=0;i<oDiv.length;i++){
    oDiv[i].timer=null;
    oDiv[i].onmouseover=function(){
     move(300,this);
    };
    oDiv[i].onmouseout=function(){
     move(100,this);
    };
   }
  };
  function move(iTarget,oDiv){
   clearInterval(oDiv.timer);
   oDiv.timer=setInterval(function(){
    var speed=(iTarget-oDiv.offsetWidth)/5;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (iTarget==oDiv.offsetWidth){
     clearInterval(oDiv.timer);
    }else{
     oDiv.style.width=oDiv.offsetWidth+speed+"px";
    }
   },30);
  }
 </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

注意事项：

多物体运动如果只是设置一个定时器（设置全局定时器）的话，那么三个div共用一个一个全局定时器，那么当一个div没有完成缩小动作的时候另一个div开启定时器执行伸展动作，由于定时器是全局的，那么上一个div的定时器将被覆盖即取消掉，故上一个定时器无法完全地昨晚缩小动作，解决办法是给每一个div设置一个属性timer。

问题二：

希望实现的功能：多图片的淡入淡出。
代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 200px;
   height: 200px;
   margin: 10px;
   background: yellow;
   float: left;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv=document.getElementsByTagName('div');
   for(var i=0;i<oDiv.length;i++){
    oDiv[i].timer=null;
    oDiv[i].alpha=30;
    oDiv[i].onmouseover=function(){
     move(100,this);
    };
    oDiv[i].onmouseout=function(){
     move(30,this);
    };
   }
  };
  function move(iTarget,obj){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var speed=(iTarget-obj.alpha)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if (obj.alpha==iTarget){
     clearInterval(obj.timer);
    }else{
     obj.alpha+=speed;
     obj.style.filter="alpha(opacity:"+obj.alpha+")";
     obj.style.opacity=obj.alpha/100;
    }
   },30);
  }
 </script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

希望实现的功能：多物体不同方向的伸缩功能。

代码：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  div{
   width: 100px;
   height: 100px;
   margin: 10px;
   background: yellow;
   float: left;
   border: 10px solid black;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById('div1');
   var oDiv2=document.getElementById('div2');
   oDiv1.timer=null;
   oDiv2.timer=null;
   oDiv1.onmouseover=function(){
    move(this,400,'height');
   };
   oDiv1.onmouseout=function(){
    move(this,100,'height');
   };
   oDiv2.onmouseover=function(){
    move(this,400,'width');
   };
   oDiv2.onmouseout=function(){
    move(this,100,'width');
   };
  };
  function getStyle(obj,name){
   if(obj.currentStyle){
    return obj.currentStyle[name];
   }else{
    return getComputedStyle(obj,false)[name];
   }
  };
  function move(obj,iTarget,name){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var cur=parseInt(getStyle(obj,name));
    var speed=(iTarget-cur)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
     clearInterval(obj.timer);
    }else{
     obj.style[name]=cur+speed+"px";
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

注意事项：

1.offsetwidth所获得的并不只是物体的纯宽度，还有物体的变宽以及外边距。那么在obj.style.width=obj.offsetwidth-1+"px";这句中，本意是希望图片缩小以1px的速度匀速缩小，但是如果将边框的宽度设置为1px而非0px，那么offsetwidth的值其实是obj的width（注意：不是style.width即不是行间的width）+2，上面这句变成了obj.style.width=obj的width+2-1+“px”；图像反而增大了。解决的办法就是不用offsetwidth，而用obj的width。width通过getStyle方法获得。
2.getStyle方法得到的是string。需要用parseint强制转换成数字类型。

完整的运动框架：

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  #div1{
   width: 200px;
   height: 200px;
   margin: 20px;
   background: yellow;
   border: 5px solid black;
   filter: alpha(opacity:30);
   opacity: 0.3;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv1=document.getElementById('div1');
   oDiv1.timer=null;
   oDiv1.onmouseover=function(){
    move(this,100,'opacity');
   };
   oDiv1.onmouseout=function(){
    move(this,30,'opacity');
   };
  };
  function getStyle(obj,name){
   if(obj.currentStyle){
    return obj.currentStyle[name];
   }else{
    return getComputedStyle(obj,false)[name];
   }
  };
  function move(obj,iTarget,name){
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
    var cur=0;
    if(name=='opacity'){
     cur=Math.round(parseFloat(getStyle(obj,name))*100);
    }else{
     cur=parseInt(getStyle(obj,name));
    }
    var speed=(iTarget-cur)/30;
    speed=speed>0?Math.ceil(speed):Math.floor(speed);
    if(cur==iTarget){
     clearInterval(obj.timer);
    }else{
     if(name=='opacity'){
      obj.style.opacity=(cur+speed)/100;
      obj.style.filter='alpha(opacity:'+cur+speed+')';
     }else{
      obj.style[name]=cur+speed+"px";
     }
    }
   },30);
  };
 </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
运动问题
javascript技巧、javascript高级技巧、javascript调试技巧、javascript小技巧、javascript实用技巧，以便于您获取更多的相关知识。

时间： 2024-09-13 21:57:06

javascript关于运动的各种问题经典总结_javascript技巧的相关文章

JavaScript缓冲运动实现方法(2则示例)_javascript技巧

本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

javascript关于运动的各种问题经典总结

  javascript关于运动的各种问题经典总结          本文实例总结了javascript关于运动的各种问题.分享给大家供大家参考.具体如下: 一.JS运动的各种问题 问题一: 错误代码: ? 1 2 3 4 5 6 7 8 9 10 11 function startMove(){ var timer=null; var div1=document.getElementById("div1"); if (div1.offsetLeft==300){ clearInter

Javascript 数组添加一个 indexOf 方法的实现代码_javascript技巧

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 运行以上代码,即可.如果大家想看的是 javascript indexOf的使用方法,请看下面的文章javascript indexOf函数使用说明JavaScript indexOf忽略大小写_javascript技巧

javascript实现下雪效果【实例代码】_javascript技巧

原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

基于JavaScript实现瀑布流效果(循环渐近)_javascript技巧

1.建立Html模版 想法是先用一个div container承载所有内容,然后div box用来放置图片,最后div box_border来当图片框,代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>瀑布流</title> </head> <body> <div class="container

JavaScript获取页面中超链接数量的方法_javascript技巧

本文实例讲述了JavaScript获取页面中超链接数量的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript取得页面的超链接数,感兴趣的朋友可以学习借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-total-link-num-codes/ 具体代码如下: <html> <head> <title>JavaScript取得页面的超链接数</title> <script l

javascript实现网页背景烟花效果的方法_javascript技巧

本文实例讲述了javascript实现网页背景烟花效果的方法.分享给大家供大家参考.具体如下: 这里的网页背景烟花爆炸特效,不用说是用Js实现的,配合黑色背景效果最好,五颜六色的烟花效果,四散的烟花效果,以前发过一些网页上的烟花特效,本款类似,但代码更简洁. 运行效果如下图所示: 具体代码如下: <html> <head> <title>背景的烟花效果</title> <style type="text/css"> <!

html5+javascript实现简单上传的注意细节_javascript技巧

简单记录下今早做H5上传中一些代码还有坑 一.展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的.所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示

Javascript 运动中Offset的bug解决方案_javascript技巧

我们先来看看这个bug 是怎么产生的. 复制代码 代码如下: <style type="text/css">             #div1 {                 width: 200px;                 height: 200px;                 background: red;                             }         </style> 复制代码 代码如下: <bo