Javascript动画学习

来源：互联网发布：徐老师淘宝外设店名字编辑：程序博客网时间：2024/06/06 19:40

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Demo1</title><script type="text/javascript">window.onload=function(){var oDiv = document.getElementById('div1');oDiv.onmouseover = function(){startMove(0);}oDiv.onmouseout = function(){startMove(-200)}}var timer1;var alpha = 30;function startMove(target){clearInterval(timer1);timer1 = setInterval(function(){var speed = 0;var colorful = 5;var oDiv = document.getElementById("div1");if(oDiv.offsetLeft > target){speed = -10;}else if(oDiv.offsetLeft < target){speed = 10;}else{clearInterval(timer1);}oDiv.style.left = oDiv.offsetLeft + speed +'px';oDiv.style.filter = 'alpha(opacity:'+ colorful +')';oDiv.style.opacity = colorful/100;},30)}</script><style type="text/css">body,div,span{margin: 0;padding: 0;}#div1{width: 200px;height: 200px;background: red;position: relative;left: -200px;top: 0;filter:alpha(opacity:30);opacity: 0.3;}#div1 span{width: 20px;height: 50px;background: blue;position: absolute;left: 200px;top: 75px;}</style></head><body><div id="div1"><span id="share">分享</span></div></body></html>

透明度IE为

filter:alpha(opacity:30);

火狐和Chrome为

<pre name="code" class="html">opacity: 0.3;

0 0