前面我们介绍了Javascript的回到顶部效果，今天呢，我们对Javascript动画做进一步的研究。在这篇博文中我们只介绍简单的匀速运动、简单的缓冲运动和简单的多物体运动后面我们还会介绍任意值变化的运动、链式运动、同时运动，同时我们还会简单的封装一个运动插件并且还会将Javascript方法和jquery方法进行比较。
1、简单的匀速运动
下面我们介绍一个demo，鼠标移入，动画向右移动（即隐藏部分显示）；鼠标离开，动画向左运动（继续隐藏）整个过程都是匀速的。有了前面回到顶部效果作为基础，这里主要讲解重要部分，先来看看代码：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>demo1</title> <style type="text/css"> body,div,span{ margin: 0px; padding: 0px; } #div1{ width: 200px; height: 200px; background: red; position: relative; left: -200px; } #share{ width: 20px; height: 40px; background: blue; position: absolute; left: 200px; top: 75px; } </style> <script type="text/javascript"> //一进来就加载 window.onload = function(){ //获取div var oDiv = document.getElementById('div1'); //鼠标移入时执行函数 oDiv.onmouseover = function(){ startMove(); } //鼠标移出时执行函数 oDiv.onmouseout = function(){ startMove1(); } } //定义一个定时器 var timer = null; function startMove(){ //让它一进来的时候就把计时器清掉，避免后面引入多个计时器 clearInterval(timer); var oDiv = document.getElementById('div1'); //插入一个定时器 timer = setInterval(function(){ // oDiv.style.left = oDiv.offsetLeft+10+'px';// //offsetLeft 当前left的值// //此时运行的结果为鼠标移上去后，一直在动，此时需要if进行判断 if(oDiv.offsetLeft == 0){ //当当前的left值为0的时候，清空计时器 clearInterval(timer); } else{ //当当前的left值不为0的时候，进行移动 oDiv.style.left = oDiv.offsetLeft+10+'px'; } },30) } function startMove1(){ clearInterval(timer); var oDiv = document.getElementById('div1'); timer = setInterval(function(){ if(oDiv.offsetLeft == -200){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft-10+'px'; } },30) } //可以修改当前内容里面相同的部分 </script> </head> <body> <div id="div1"> <span id="share"> 分享 </span> </div> </body></html>
新闻热点
疑难解答
图片精选
