js 分享 运动框架
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:200px; background:red; position:absolute; left:-100px } #span1{ width:20px; height:60px; background:blue; position:absolute; line-height:20px; top:70px; right:-20px; } </style> <script> window.onload=function(){ var odiv=document.getElementById('div1'); odiv.onmouseover=function(){ onStart(0); } odiv.onmouseout=function(){ onStart(-100); } } var timer=null; function onStart(oTag){ var odiv=document.getElementById('div1'); clearInterval(timer); var speed=null; if(speed>oTag){ speed=-10; }else{ speed=10; } timer=setInterval(function (){ if(odiv.offsetLeft==oTag){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+speed+'px'; } },30) } </script> </head> <body> <div id="div1"> <span id="span1">分享到</span> </div> </body> </html>
关于速度的小解释
分享框
left30 tag300 正
left600 tag30 负
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{ width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmousemove=function(){ onStart(100); } oDiv.onmouseout=function(){ onStart(30); } } var timer=null; var alpha=30; function onStart(Tag){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha<Tag){ speed=1; }else{ speed=-1; } if(alpha==Tag){ clearInterval(timer); }else{ alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>