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

css问题filter:alpha(opacity=100,finishopacity=0,style=2)2012-12-0108: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的浏览器（FF1.5也支持）*/”>CSSopacity属性opacity--不透明度取值:|inherit:透明度取值(取值范围[0.0,1.0])inherit:\n继承初始值:1(不透明)运动中要注意的问题;一定义个变量varispeed改变速度的大小二运动中的bug1.不会停止：关闭定时器clearInterval(timer);注意括号内没单引号。2.速度取某些值不会停止：把判定是否到达终点由if（oDiv.offsetLeft==300）改成if（oDiv.offsetLeft>=300）3.到达位置时再点击还会运动：解决办法是用if（判断是否到达）{到达就关闭定时器}else{就执行样式改变}4.重复点击会速度加快：解决办法在开定时器之前先关闭定时器。原因当再次点击时会先执行一次在判断是否到达。5.匀速运动6.运动框架：1在开始时关闭定时器2把运动和停止用ifelse隔开7.8.9.10.11.#div1{width:76px;height:200px;position:absolute;background:#CCCCCC;left:-80px;top:50px;}12.#div1span{width:20px;height:40px;position:absolute;top:80px;left:80px;}13.14.15.16.\n1.window.onload=function(){2.varoDiv=document.getElementById('div1');3.oDiv.onmouseover=function(){startMove(0);}4.oDiv.onmouseout=function(){startMove(-80);}};5.vartimer=null;6.functionstartMove(iTarget){7.varoDiv=document.getElementById('div1');8.clearInterval(timer);//先关闭定时器9.//下面开启定时器10.varipseed=0;11.if(oDiv.offsetLeft>iTarget)12.{ispeed=-10;}13.else{ispeed=10;}14.timer=setInterval(function(){15.if(oDiv.offsetLeft==iTarget)//这里不要用>=0作为判断条件否则会在取一些值时不会停止。16.{clearInterval(timer);}17.else{oDiv.style.left=oDiv.offsetLeft+ispeed+'px';}},30);}18.19.20./*//鼠标移出时iTargetfunctionstartMove2(ispeediTarget){varoDiv=document.getElementById('div1');clearInterval(timer);//先关闭定时器//下面开启定时器timer=setInterval(function(){if(oDiv.offsetLeft<=-76)//这里不要用>=0作为判断条件否则会在取一些值时不会停止。\n{clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+ispeed+'px';}},30);}*/1.2.3.4.5.分享到6.