alpha在js中的使用以及运动框架的注意事项
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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 -- 不透明度
取值: <alphavalue> | inherit
<alphavalue>: 透明度取值(取值范围[0.0,1.0])
inherit: 继承
初始值: 1(不透明)
运动中要注意的问题;
一定义个变量 var ispeed改变速度的大小
二运动中的bug
1.不会停止：关闭定时器 clearInterval(timer);注意括号内没单引号。
2.速度取某些值不会停止：把判定是否到达终点由if（oDiv.offsetLeft==300）改成
if（oDiv.offsetLeft>=300）
3.到达位置时再点击还会运动：解决办法是用if（判断是否到达）{ 到达就关闭定时
器 }else{就执行样式改变 }
4.重复点击会速度加快：解决办法在开定时器之前先关闭定时器。
原因当再次点击时
会先执行一次在判断是否到达。
5.匀速运动
6.运动框架：1在开始时关闭定时器2把运动和停止用if else隔开
7.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8.<html xmlns="/1999/xhtml">
9. <head>
10. <style type="text/css">
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. </style>
14.<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
15. <title>分享到侧边栏代码简化4</title>
16. <script type="text/javascript">
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<=-76)//这里不要用>=0作为判断条件否则会在取一些值时不会停止。
{ clearInterval(timer); } else
{ oDiv.style.left=oDiv.offsetLeft+ispeed+'px'; } },30); }*/
37.</script>
38.</head>
39. <body>
40.<div id="div1">
41. <span>分享到</span>
42.</div>
43. </body>。