alpha在js中的使用以及运动框架的注意事项.doc

css问题filter: alpha(opacity=100,finishopacity=0,style=2)2012-12-01 08:12:15 我来说两句 作者：longeremmy收藏我要投稿1、alpha是来设置透明度的,它的基本属性是filter：alpha（opacity，finishopacity，style，startX，startY，finishX，finishY）.opacity代表透明度数,选值0-100,0是完全透明,100是不透明.finishopacity用来设置结束时的透明度,以达到渐变效果.取值范围也是0-100.2、style指渐变类型,0是无变化,1是线行渐变,2是放射渐变,3是X型渐变.alpha是来设置透明度的。先来看一下它的表达格式：filter：alpha（opacity=opcity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）哇，怎么这么长。是啊，不过这些参数都各有其用。Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。filter:alpha(opacity=20); /* IE浏览器支持 */ ;-moz-opacity:0.4; /* 遨游浏览器 火狐浏览器 支持 */ ;opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/”CSS opacity 属性opacity - 不透明度取值: | inherit: 透明度取值(取值范围0.0,1.0)inherit: 继承初始值: 1(不透明)运动中要注意的问题;一定义个变量 var ispeed改变速度的大小二运动中的bug1. 不会停止：关闭定时器 clearInterval(timer);注意括号内没单引号。2. 速度取某些值不会停止：把判定是否到达终点由if（oDiv.offsetLeft=300）改成if（oDiv.offsetLeft=300）3. 到达位置时再点击还会运动：解决办法是用if（判断是否到达） 到达就关闭定时器 else就执行样式改变 4. 重复点击会速度加快：解决办法在开定时器之前先关闭定时器。原因当再次点击时会先执行一次在判断是否到达。5. 匀速运动6. 运动框架：1在开始时关闭定时器2把运动和停止用if else隔开7. 8. 9. 10. 11. #div1 width:76px; height:200px; position:absolute; background:#CCCCCC; left:-80px; top:50px; 12. #div1 span width:20px; height:40px; position:absolute; top:80px; left:80px; 13. 14. 15. 分享到侧边栏代码简化4 16. 17. window.onload=function() 18. var oDiv=document.getElementById(div1);19. oDiv.onmouseover=function() startMove(0); 20. oDiv.onmouseout=function() startMove( -80); ; 21. var timer=null; 22. function startMove( iTarget) 23. var oDiv=document.getElementById(div1); 24. clearInterval(timer);/先关闭定时器 25. /下面开启定时器 26. var ipseed=0; 27. if(oDiv.offsetLeft iTarget) 28. ispeed=-10; 29. else ispeed=10; 30. timer=setInterval(function() 31. if(oDiv.offsetLeft= iTarget)/这里不要用=0作为判断条件否则会在取一些值时不会停止。 32. clearInterval(timer); 33. else oDiv.style.left=oDiv.offsetLeft+ispeed+px; ,30); 34.35. 36. /*/鼠标移出时 iTarget function startMove2(ispeed iTarget) var oDiv=document.getElementById(div1); clearInterval(timer);/先关闭定时器 /下面开启定时器 timer=setInterval(function() if(oDiv.offsetLeft=0作为判断条件否则会在取一些值时不