看来我的计时器的应用还要加强才行呀
生活随笔
收集整理的這篇文章主要介紹了
看来我的计时器的应用还要加强才行呀
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本來想照著網(wǎng)上的效果模擬一個（說來慚愧，我現(xiàn)在除了模仿就是抄），忽然發(fā)現(xiàn)我對計時器的應(yīng)用不是很熟練，本想來面向?qū)ο蟮?#xff0c;可是我覺得還是先聯(lián)系計時器，增加一下基礎(chǔ)知識吧，要不感覺好不給力啊。
<!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=gb2312" /> <title>幻燈片</title> <style type="text/css"> * {margin:0;padding:0;} body {font-size:12px;color:#222;font-family:Verdana, Arial, Helvetica, sans-serif;background:#f0f0f0;} ul, li {list-style:none;} img {border:0;display:block;width:100%;} #focus {width:1200px;height:300px;overflow:hidden;margin:0 auto;margin:100px auto;position:relative;} #focus ul{ height:280px;} #focus ul li {display:block;position:absolute;} .a {width:600px;height:210px;left:0;top:20px;z-index:1;} .b {width:700px;height:245px;left:100px;top:10px;z-index:2} .c {width:800px;left:200px;top:0;z-index:3} .d {width:700px;height:245px;left:400px;top:10px;z-index:2} .e {width:600px;height:210px;left:600px;top:20px;z-index:1;} .indexNum{ height:20px; text-align:center;} .indexNum a{ display:inline-block; width:15px; background:#990; height:15px; margin:5px 2px 0 2px;;} .indexNum a.cur{ background:#6F3;} </style> <script type="text/javascript"></script> </head> <body> <div id="focus"><ul><li class="c"><img src="img/03.jpg" /></li><li class="d"><img src="img/04.jpg" /></li><li class="e"><img src="img/05.jpg" /></li><li class="a"><img src="img/01.jpg" /></li><li class="b"><img src="img/02.jpg" /></li></ul> </div></body> </html> <script type="text/javascript"> var o=document.getElementById("focus"); var aLi=o.getElementsByTagName("li"); var timer=null;var aBtnWrap=document.createElement("div"); aBtnWrap.className="indexNum";for(var i=0;i<aLi.length;i++){var aBtn=document.createElement("a");aBtnWrap.appendChild(aBtn); } o.appendChild(aBtnWrap);var aBtn=o.getElementsByTagName("div")[0].getElementsByTagName("a"); var arr=[]; var key=0; aBtn[key].className="cur";for(var i=0;i<aLi.length;i++){aLi[i].style.cssText="top:"+creatJson(aLi[i]).top+"px;left:"+creatJson(aLi[i]).left+"px;width:"+creatJson(aLi[i]).width+"px;height:"+creatJson(aLi[i]).height+"px;z-index:"+creatJson(aLi[i]).zIndex;aLi[i].removeAttribute("class","");arr.push(creatJson(aLi[i])); }for(var i=0;i<aLi.length;i++){aBtn[i].index=aLi[i].index=i;aBtn[i].onclick=aLi[i].onclick=function(){key=this.index;switchs(key)} }function switchs(key){var t=[];for(c=0;c<aBtn.length;c++){aBtn[c].className=""; }aBtn[key].className="cur";//制造新數(shù)組并且運動交換位置for(z=0;z<aLi.length;z++){if(key==aLi.length){key=0;}t[key]=arr[z];key++;}for(q=0;q<aLi.length;q++){ move(aLi[q],t[q]) }} function auto(){ clearInterval(timer); timer=setInterval(function(){key++;if(key==aLi.length){key=0;}switchs(key); },1000) } o.onmouseover=function(){clearInterval(timer); } o.onmouseout=function(){auto() } auto()//制作json數(shù)據(jù) function creatJson(obj){var Json={};Json.top=parseInt(getcss(obj,"top"));Json.left=parseInt(getcss(obj,"left"));Json.width=parseInt(getcss(obj,"width"));Json.height=parseInt(getcss(obj,"height"));Json.zIndex=parseInt(getcss(obj,"zIndex"));return Json; }//運動框架，不包含透明度 function move(obj,json,fn){clearInterval(obj.timer) obj.timer=setInterval(function(){obj.bstop=true;for(i in json){if(i=="zIndex"){obj.style.zIndex=json[i];}else{var pos=parseInt(getcss(obj,i));var speed=pos>json[i]?Math.floor(((json[i]-pos)/5)): Math.ceil(((json[i]-pos)/5));obj.style[i]=speed+pos+"px";if(parseInt(getcss(obj,i))!=json[i]){obj.bstop=false;}}}if(obj.bstop){clearInterval(obj.timer);fn && fn();} },30) }//獲取計算后的樣式 function getcss(obj,attr){return (obj.currentStyle||getComputedStyle(obj, false))[attr]; } </script>?
轉(zhuǎn)載于:https://www.cnblogs.com/busicu/p/3992755.html
總結(jié)
以上是生活随笔為你收集整理的看来我的计时器的应用还要加强才行呀的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android实现点击事件的4种方式
- 下一篇： 玩转百度地图（二）之画圆，高德地图、搜搜