标签：log 16px mouse margin over padding class 弹出动画 var
一、多物体边栏弹出动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体边栏弹出动画</title> <style type="text/css"> *{margin:0;padding:0;} div{width:200px;height:200px;background-color:#ccc;position:absolute;left:-200px;} #box2{top:210px;} #box3{top:420px;} #box4{top:630px;} span{display:block;font-size:16px;line-height:30px;font-family:微软雅黑;text-align:center;width:24px;height:60px;background-color:orange;position:absolute;left:200px;top:70px;} </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementsByTagName(‘div‘); for(var i=0;i<box.length;i++){ box[i].onmouseover = function(){move(this,0);} box[i].onmouseout = function(){move(this,-200);} } } function move(obj,aim){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var spd = spd>=0?Math.ceil((aim-obj.offsetLeft)/10):Math.floor((aim-obj.offsetLeft)/10); if(obj.offsetLeft==aim){ clearInterval(obj.timer); } else{ obj.style.left = obj.offsetLeft+spd+‘px‘; } },30) } </script> </head> <body> <div id="box1" style=""><span>分享</span></div> <div id="box2" style=""><span>分享</span></div> <div id="box3" style=""><span>分享</span></div> <div id="box4" style=""><span>分享</span></div> </body> </html>
二、多物体透明度渐变动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体透明度渐变动画</title> <style type="text/css"> *{margin:0;padding:0;} div{width:200px;height:200px;margin:10px;background-color:red;filter:alpha(opacity=30);opacity:0.3;} </style> <script type="text/javascript"> window.onload = function(){ var div = document.getElementsByTagName(‘div‘); for(var i=0;i<div.length;i++){ div[i].onmouseover = function(){chgopa(this,100);} div[i].onmouseout = function(){chgopa(this,30);} div[i].opa = 30; } } function chgopa(obj,aim){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var spd = (aim-65)/3.5; if(obj.opa==aim){ clearInterval(obj.timer); } else{ obj.opa = obj.opa + spd; obj.style.opacity = obj.opa/100; obj.style.filter = ‘alpha(opacity=‘ + obj.opa + ‘)‘; } },30) } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
标签：log 16px mouse margin over padding class 弹出动画 var
原文地址：http://www.cnblogs.com/oliverliu/p/6857352.html
