多个物体同时运动
•例子：多个Div，鼠标移入变宽
–单定时器，存在问题
–每个Div一个定时器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> div {100px; height:50px; background:red; margin-top:50px;} </style> <script> window.onload=function() { var aDiv=document.getElementsByTagName('div'); var i=0; for(i=0; i<aDiv.length; i++) { aDiv[i].timer=null; aDiv[i].onmouseover=function() { startMove(this, 3000); } aDiv[i].onmouseout=function() { startMove(this, 100); } } } function startMove(obj, iTarget) { clearInterval(obj.timer); obj.timer=setInterval(function (){ //算速度 var iSpeed=(iTarget-obj.offsetWidth)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //判断 if(obj.offsetWidth==iTarget) { clearInterval(obj.timer); } else { obj.style.width=obj.offsetWidth+iSpeed+'px'; } }, 30) } </script> </head> <body> <div></div> <div></div> <div></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {100px; height:100px; background:red; border:1px solid black;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> setInterval(function (){ var oDiv=document.getElementById('div1'); //没转换成整数，会变成+1 oDiv.style.width=oDiv.offsetWidth-1+'px'; }, 30); </script> </head> <body> <div id="div1"></div> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {100px; height:100px; background:red; border:1px solid black;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> //获取行间样式的函数 function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } setInterval(function (){ var oDiv=document.getElementById('div1'); //oDiv.style.width=oDiv.offsetWidth-1+'px'; oDiv.style.width=parseInt(getStyle(oDiv, 'width'))-1+'px'; }, 30); </script> </head> <body>
多物体运动框架
•定时器作为物体的属性
•参数的传递：物体、目标值
•例子：多个Div淡入淡出
–所有东西都不能公用
–属性与运动对象绑定：速度、其他属性值（如透明度等）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #div1 {200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;} </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(oDiv, 'opacity', 100); } oDiv.onmouseout=function () { startMove(oDiv, 'opacity', 30); } } //获取行间样式 function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } //判断 对象 属性 数值的函数 function startMove(obj, attr, iTarget) { //开启单个定时器 clearInterval(obj.timer); obj.timer=setInterval(function (){ var iCur=0; //判断属性是不是透明度 if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } //判断速度 var iSpeed=(iTarget-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //终止条件 if(iCur==iTarget) { clearInterval(obj.timer); } //不终止判断 else { //把以前转换数值转换过来 if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; document.getElementById('txt1').value=obj.style.opacity; } else { //继续加 obj.style[attr]=iCur+iSpeed+'px'; } } }, 30) } </script> </head>
loffset属性的Bug
•有边框的Div变宽
–用currentStyle代替offset
l原有运动框架的问题
•只能让某个值运动起来
•如果想让其他值运动起来，要修改程序
l扩展的运动框架
•运动属性作为参数
•封装opacity
–小数的问题
l效果思路
•两边的按钮——淡入淡出
•大图下拉——层级、高度变化
•下方的li——多物体淡入淡出
•下方的Ul——位置计算
l左右按钮
•淡入淡出
–鼠标移到按钮上，按钮会消失
»层级问题
»按钮和遮罩上都得加上事件
l下方Li效果
•点击切换大图——选项卡
•Li淡入淡出——移入移出
•Ul移动——位置计算
l大图片切换
•图片层级——zIndex一直加1
•图片下拉效果(运动框架)
–可以改为淡入淡出
l加入自动播放
•和选项卡一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>仿FLASH的图片轮换效果 —— www.miaov.com 妙味课堂</title> <link rel="stylesheet" type="text/css" href="miao_style.css"> <script src="../move.js"></script> <script> function getByClass(oParent, sClass) { var aEle=document.getElementsByTagName('*'); var i=0; var aResult=[]; for(i=0;i<aEle.length;i++) { if(aEle[i].className==sClass) { aResult.push(aEle[i]); } } return aResult; } window.onload=function () { var oDiv=document.getElementById('playeimages'); var oBtnPrev=getByClass(oDiv, 'prev')[0]; var oBtnNext=getByClass(oDiv, 'next')[0]; var oMarkLeft=getByClass(oDiv, 'mark_left')[0]; var oMarkRight=getByClass(oDiv, 'mark_right')[0]; var oSmallUl=getByClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0]; var aSmallLi=oSmallUl.getElementsByTagName('li'); var oBigUl=getByClass(oDiv, 'big_pic')[0]; var aBigLi=oBigUl.getElementsByTagName('li'); var iNow=0; var iMinZindex=2; var i=0; oSmallUl.style.width=aSmallLi.length*aSmallLi[0].offsetWidth+'px'; //上面的左右按钮 oBtnPrev.onmouseover=oMarkLeft.onmouseover=function () { startMove(oBtnPrev, 'opacity', 100); } oBtnPrev.onmouseout=oMarkLeft.onmouseout=function () { startMove(oBtnPrev, 'opacity', 0); } oBtnNext.onmouseover=oMarkRight.onmouseover=function () { startMove(oBtnNext, 'opacity', 100); } oBtnNext.onmouseout=oMarkRight.onmouseout=function () { startMove(oBtnNext, 'opacity', 0); } //小图点击，大图显示 for(i=0;i<aSmallLi.length;i++) { aSmallLi[i].index=i; aSmallLi[i].onmouseover=function () { startMove(this, 'opacity', 100); } aSmallLi[i].onmouseout=function () { if(this.index!=iNow) { startMove(this, 'opacity', 60); } } aSmallLi[i].onclick=function () { if(this.index==iNow)return; iNow=this.index; tab(); } function tab() { for(i=0;i<aSmallLi.length;i++) { startMove(aSmallLi[i], 'opacity', 60); } startMove(aSmallLi[iNow], 'opacity', 100); aBigLi[iNow].style.zIndex=iMinZindex++; aBigLi[iNow].style.height=0; startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight); if(iNow==0) { startMove(oSmallUl, 'left', 0); } else if(iNow==aSmallLi.length-1) { startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth); } else { startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth); } } oBtnPrev.onclick=function () { iNow--; if(iNow==-1) { iNow=aSmallLi.length-1; } tab(); } oBtnNext.onclick=function () { iNow++; if(iNow==aSmallLi.length) { iNow=0; } tab(); } } } </script> </head> <body> <div id="playimages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class="next"></div> <div class="text">加载图片说明……</div> <div class="length">计算图片数量……</div> <a class="mark_left" href="javascript:;"></a> <a class="mark_right" href="javascript:;"></a> <div class="bg"></div> <li style="z-index:1;"><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> <li><img src="images/6.jpg" /></li> </ul> <div class="small_pic"> <ul style="390px;"> <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/4.jpg" /></li> <li><img src="images/5.jpg" /></li> <li><img src="images/6.jpg" /></li> </ul> </div> </div> </body>
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; } .play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; } .big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; } .big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; } .mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; } .mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; } .big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; cursor: pointer; filter:alpha(opacity: 0); opacity:0; } .big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; filter:alpha(opacity: 0); opacity:0; } .big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; } .big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; } .big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; } .small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; } .small_pic ul { height: 94px; position: absolute; top: 0; left: 0; } .small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; } .small_pic img { width: 120px; height: 94px; }
l多物体运动
l任意值运动