运动框架实现思想
1.速度(改变值left，right，width，height，opacity)
2.缓冲运动
3.多物体运动
4.任意值变化
5.链式运动
6.同时运动
我们先来介绍第一章改变left值来使物体左右移动
html文件
<!DOCTYPE html> <html> <head> <title>js动画事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <div id="div1"> <span id="sp1">分享</span> </div> </body> </html>
css文件
*{ margin:0px; padding:0px; } #div1{ width:200px; height:200px; position:absolute; left:-200px; background:red; border:1px solid #eeddcc; } #sp1{ display:block; width:20px; height:80px; position:absolute; left:200px; top:60px; border:1px solid red; color:#036; line-height:40px;//这里设置的宽度只能容纳一个字，所以这两个字上下排列的，但是如果我们想让这两个字在span中居中显示，那么我们就设置line-height的值为height的一半 }
js文件
var timer; window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=show; div1.onmouseout=hiden; } function show(){ clearInterval(timer);//跟前一课程讲的一样，在定义一个定时器前先删除前一次产生的定时器。 var div1=document.getElementById("div1"); timer=setInterval(function(){ if(div1.offsetLeft==0){ clearInterval(timer); }else{ div1.style.left=div1.offsetLeft+10+"px";//这句话要注意喽，"px"不能丢奥！ } },50) } function hiden(){ clearInterval(timer); var div1=document.getElementById("div1"); timer=setInterval(function(){ if(div1.offsetLeft==-200){ clearInterval(timer); }else{ div1.style.left=div1.offsetLeft-10+"px"; } },50) }
效果图：
当我们鼠标移动分享上面时就慢慢显示出来了
当我们鼠标移出来后，红色块就慢慢移回去了。