代码片段 1
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS 练习之透明度运动 </title>
- <style>
- #div{width:200px; height:200px; background:#f60; filter:alpha(opacity:30); opacity:0.3;}
- </style>
- <script>
- window.onload=function()
- {
- var oDiv=document.getElementById('div')
- oDiv.onmouseover=function()
- {
- startMove(100)
- }
- oDiv.onmouseout=function()
- {
- startMove(30)
- }
- }
- var timer=null
- var alpha=30
- function startMove(iTarget)
- {
- var oDiv=document.getElementById('div')
- clearInterval(timer)
- timer=setInterval(function()
- {
- if(alpha<iTarget)
- {
- speed=10
- }
- else
- {
- speed=-10
- }
- if(alpha==iTarget)
- {
- clearInterval(timer)
- }
- else
- {
- alpha+=speed;
- oDiv.style.filter='alpha(opacity:'+alpha+')'
- oDiv.style.opacity=alpha/100
- }
- },30)
- }
- </script>
- </head>
- <body>
- <div id="div"></div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/18389/08b9aba1271dcb2ddbf925f1ad14b1a2.html