预解析：
// 作用域： // 域：空间、范围、区域…… // 作用：读、写 script 全局变量、全局函数 自上而下 函数 由里到外 {} 浏览器： “JS解析器” 1）“找一些东西” ：var function 参数 a = ... 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义 fn1 = function fn1(){ alert(2); } 所有的函数，在正式运行代码之前，都是赋整个函数块 JS 的预解析 遇到重名的：只留一个 变量和函数重名了，就只留下函数 2）逐行解读代码： 表达式：= + - * / % ++ -- ! 参数…… 表达式可以修改预解析的值！ if{} for{} dowhile{} 不是作用域
3D转示：
<!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> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>3Dzhuanshi</title> <script> window.onload=function () { //拖着虚拟的点转动,虚拟点不设置y点，是因为不想让在Y轴上还运动 var x=lastX=0; var iSpeed=0; var timer=null; var oImg=document.getElementById("img1"); var aImg=document.getElementsByTagName('img'); var oLastImg=oImg;//标志显示当前的img //图片优化性能 for(var i=0; i<77; i++) { //(fn(param))(sparam); (function(oNewImg) { var oImgs=new Image(); //var oNewImg=document.createElement('img'); oImgs.onload=function() { oNewImg.src=this.src; }; oImgs.src='img/miaov ('+i+').jpg'; oNewImg.style.display='none'; document.body.appendChild(oNewImg); })(document.createElement('img')); } document.onmousedown=function(ev) { clearInterval(timer); var oEvent=ev||event; var disX=oEvent.clientX-x; document.onmousemove=function(ev) { oEvent=ev||event; x=oEvent.clientX-disX; move(); iSpeed=x-lastX; lastX=x; //oImg.src='img/miaov ('+l+').jpg'; return false;//解决ie的默认事件 }; document.onmouseup=function() { document.onmousemove=null; document.onmouseup=null; timer=setInterval(function(){ x+=iSpeed; move(); }, 30); }; function move() { if(iSpeed>0) iSpeed--; else iSpeed++; var l=parseInt(-x/10); //拖动10个像素，图片旋转 if(iSpeed==0) { clearInterval(timer); } if(l>0) l=l%77; else l=l+Math.floor(l/77)*77*(-1); //图片优化性能 if(oLastImg!=aImg[l]) { oLastImg.style.display='none'; aImg[l].style.display='block'; oLastImg=aImg[l]; } } return false;//禁止默认事件ff/chrome支持，，ie不支持 }; }; </script> </head> <body> <img id="img1" src="img/miaov (0).jpg" /> <!--<div id="bg"></div> <div id="prog"> 360度全景展示 载入中......<span>0%</span> <div id="bar"></div> </div>--> </body> </html>
图片缩略转示：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片缩略图转示</title> 6 <link href="css/css.css" rel="stylesheet" /> 7 <script src="js/move.js"></script> 8 <script> 9 window.onload=function () 10 { 11 var oDiv=document.getElementById('box'); 12 var aPicLi=document.getElementById('pic_list').getElementsByTagName('li'); 13 var aTxtLi=document.getElementById('text_list').getElementsByTagName('li'); 14 var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0]; 15 var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li'); 16 var oBtnPrev=document.getElementById('btn_prev'); 17 var oBtnNext=document.getElementById('btn_next'); 18 var iNow=0; 19 var iNowUlLeft=0; 20 oBtnPrev.onclick=function() { 21 if(iNowUlLeft>0) { 22 iNowUlLeft--; 23 //oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px'; 24 fixUlLeft(); 25 } 26 }; 27 28 function fixUlLeft() 29 { 30 oBtnPrev.className=iNowUlLeft==0?'btn':'btn showBtn'; 31 oBtnNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn'; 32 miaovStartMove(oIcoUl, {left: -aIcoLi[0].offsetWidth*iNowUlLeft}, MIAOV_MOVE_TYPE.BUFFER); 33 } 34 35 oBtnNext.onclick=function() { 36 if(iNowUlLeft<aIcoLi.length-7) { 37 iNowUlLeft++; //oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px'; 38 fixUlLeft(); 39 } 40 }; 41 42 for(var i=0; i<aIcoLi.length; i++) 43 { 44 aIcoLi[i].index=i; 45 aIcoLi[i].onclick=function() { 46 if(iNow==this.index) { 47 return; 48 } 49 iNow=this.index; 50 tab(); 51 }; 52 } 53 54 function tab() { 55 for(var i=0; i<aIcoLi.length; i++) 56 { 57 if(i==iNow) { 58 aIcoLi[iNow].className='active'; 59 aTxtLi[iNow].getElementsByTagName('h2')[0].className='show'; 60 //aPicLi[this.index].style.filter='alpha(opacity:100)'; 61 //aPicLi[this.index].style.opacity=100; 62 miaovStartMove(aPicLi[iNow], {opacity:100}, MIAOV_MOVE_TYPE.BUFFER); 63 } else { 64 aIcoLi[i].className=''; 65 aTxtLi(i).getElementsByTagName('h2')[0].className=''; 66 aPicLi[i].style.filter='alpha(opacity:0)'; 67 aPicLi[i].style.opacity=0; 68 miaovStopMove(aPicLi[i]); 69 } 70 } 71 } 72 73 function autoPlay() { 74 iNow++; 75 if(iNow>=aIcoLi.length) 76 iNow=0; 77 if(iNow<iNowUlLeft) 78 iNowUlLeft=iNow; 79 else if(iNow>=iNowUlLeft+7) 80 iNowUlLeft=iNow-6; 81 fixUlLeft(); 82 tab(); 83 } 84 var timer=setInterval(autoPlay, 3000); 85 oDiv.onmouseover=function(){ 86 clearInterval(timer); 87 }; 88 oDiv.onmouseout=function(){ 89 timer=setInterval(autoPlay, 3000); 90 }; 91 }; 92 </script> 93 </head> 94 95 <body> 96 <div id="box"> 97 <ul id="pic_list"> 98 <li style="z-index:2;opacity:1;fliter:alpha(opacity=100);"> 99 <a href="http://www.miaov.com"><img src="img/pic_1.jpg" alert="我是你"/></a> 100 </li> 101 <li> 102 <a href="http://www.miaov.com"><img src="img/pic_2.jpg" alert="我是你"/></a> 103 </li> 104 <li> 105 <a href="http://www.miaov.com"><img src="img/pic_3.jpg" alert="我是你"/></a> 106 </li> 107 <li> 108 <a href="http://www.miaov.com"><img src="img/pic_4.jpg" alert="我是你"/></a> 109 </li> 110 <li> 111 <a href="http://www.miaov.com"><img src="img/pic_5.jpg" alert="我是你"/></a> 112 </li> 113 <li> 114 <a href="http://www.miaov.com"><img src="img/pic_6.jpg" alert="我是你"/></a> 115 </li> 116 <li> 117 <a href="http://www.miaov.com"><img src="img/pic_7.jpg" alert="我是你"/></a> 118 </li> 119 <li> 120 <a href="http://www.miaov.com"><img src="img/pic_8.jpg" alert="我是你"/></a> 121 </li> 122 <li> 123 <a href="http://www.miaov.com"><img src="img/pic_9.jpg" alert="我是你"/></a> 124 </li> 125 <li> 126 <a href="http://www.miaov.com"><img src="img/pic_10.jpg" alert="我是你"/></a> 127 </li> 128 <li> 129 <a href="http://www.miaov.com"><img src="img/pic_11.jpg" alert="我是你"/></a> 130 </li> 131 <li> 132 <a href="http://www.miaov.com"><img src="img/pic_12.jpg" alert="我是你"/></a> 133 </li> 134 <li> 135 <a href="http://www.miaov.com"><img src="img/pic_13.jpg" alert="我是你"/></a> 136 </li> 137 <li> 138 <a href="http://www.miaov.com"><img src="img/pic_14.jpg" alert="我是你"/></a> 139 </li> 140 </ul> 141 <div class="mark"></div> 142 143 <ul id="text_list"> 144 <li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li> 145 <li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li> 146 <li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li> 147 <li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li> 148 <li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li> 149 <li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li> 150 <li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li> 151 <li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li> 152 <li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li> 153 <li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li> 154 <li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li> 155 <li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li> 156 <li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li> 157 <li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li> 158 </ul> 159 <div id="ico_list"> 160 <ul> 161 <li class="active"><a href="#"><img src="img/ico_1.jpg" alt="我是你"/></a></li> 162 <li><a href="#"><img src="img/ico_2.jpg" alt="我是你"/></a></li> 163 <li><a href="#"><img src="img/ico_3.jpg" alt="我是你"/></a></li> 164 <li><a href="#"><img src="img/ico_4.jpg" alt="我是你"/></a></li> 165 <li><a href="#"><img src="img/ico_5.jpg" alt="我是你"/></a></li> 166 <li><a href="#"><img src="img/ico_6.jpg" alt="我是你"/></a></li> 167 <li><a href="#"><img src="img/ico_7.jpg" alt="我是你"/></a></li> 168 <li><a href="#"><img src="img/ico_8.jpg" alt="我是你"/></a></li> 169 <li><a href="#"><img src="img/ico_9.jpg" alt="我是你"/></a></li> 170 <li><a href="#"><img src="img/ico_10.jpg" alt="我是你"/></a></li> 171 <li><a href="#"><img src="img/ico_11.jpg" alt="我是你"/></a></li> 172 <li><a href="#"><img src="img/ico_12.jpg" alt="我是你"/></a></li> 173 <li><a href="#"><img src="img/ico_13.jpg" alt="我是你"/></a></li> 174 <li><a href="#"><img src="img/ico_14.jpg" alt="我是你"/></a></li> 175 </ul> 176 </div> 177 <a href="#" id="btn_prev" class="btn"></a> 178 <a href="#" id="btn_next" class="btn showBtn"></a> 179 </div> 180 </body> 181 </html>
图片缩放实例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>放大镜 - 预览 -mingliu</title> 6 <style type="text/css"> 7 *{ margin:0;} 8 #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative;} 9 10 #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative;}/**<!--放小图片-->*/ 11 #div1 .float_layer { width: 50px; height: 50px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none;}/**<!--放小方块-->>*/ 12 #div1 .mark {width:100%; z-index:2; height:100%; position:absolute; left:0px; top:0px; background:red; cursor:crosshair; filter:alpha(opacity:0); opacity:0;}/**<!--放遮罩层-->>*/ 13 #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }/**<!--放大图-->>*/ 14 #div1 .big_pic img { position:absolute; top: -30px; left: -80px; } 15 </style> 16 <script type="text/javascript"> 17 function getByClass(oParent, sClass) 18 { 19 var aEle=oParent.getElementsByTagName('*');//*得到指定oParent对象下的所有对象 20 var aTmp=[]; //存放被选中sClass类的对象 21 var i=0; 22 23 for(i=0;i<aEle.length;i++) 24 { 25 if(aEle[i].className==sClass) 26 { 27 aTmp.push(aEle[i]);//找到就push到数组中 28 } 29 } 30 31 return aTmp; 32 } 33 34 window.onload=function () 35 { 36 var oDiv=document.getElementById('div1'); 37 var oMark=getByClass(oDiv, 'mark')[0]; 38 var oFloat=getByClass(oDiv, 'float_layer')[0]; 39 var oBig=getByClass(oDiv, 'big_pic')[0]; 40 var oSmall=getByClass(oDiv, 'small_pic')[0]; 41 var oImg=oBig.getElementsByTagName('img')[0]; 42 oMark.onmouseover=function() { 43 oFloat.style.display="block"; 44 oBig.style.display="block"; 45 }; 46 oMark.onmouseout=function() { 47 oFloat.style.display="none"; 48 oBig.style.display="none"; 49 }; 50 oMark.onmousemove=function(ev){ 51 var oEvent=ev||event; 52 var curX=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2; 53 var curY=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2; 54 if(curX<0) 55 curX=0; 56 else if(curX>oMark.offsetWidth-oFloat.offsetWidth) 57 curX=oMark.offsetWidth-oFloat.offsetWidth; 58 if(curY<0) 59 curY=0; 60 else if(curY>oMark.offsetHeight-oFloat.offsetHeight) 61 curY=oMark.offsetHeight-oFloat.offsetHeight; 62 oFloat.style.left=curX+'px'; 63 oFloat.style.top=curY+'px'; 64 65 //大图移动的比率：curX:实际移动宽|高；oMark.offsetWidth-oFloat.offsetWidth（遮罩宽|高-浮动层宽|高：实际小图上总移动宽|高） 实际/总宽高就是比率 66 var percentX=curX/(oMark.offsetWidth-oFloat.offsetWidth); 67 var percentY=curY/(oMark.offsetHeight-oFloat.offsetHeight); 68 //大图移动大小,限制范围，防止大图出现空白部分。 69 oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px'; 70 oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px'; 71 }; 72 }; 73 74 </script> 75 </head> 76 77 <body> 78 79 <div id="div1"> 80 <div class="small_pic"> 81 <span class="mark"></span> 82 <span class="float_layer"></span> 83 <img src="images/small.png" alt="放大镜 - 预览 -mingliu" longdesc="放大镜 - 预览 -mingliu" /> 84 </div> 85 86 <div class="big_pic"> 87 <img src="images/big.png" alt="放大镜 - 预览 -mingliu" longdesc="放大镜 - 预览 -mingliu" /> 88 </div> 89 90 </div> 91 92 </body> 93 </html>
图片上下转示：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>ddddddd</title> <link href="style/common.css" type="text/css" rel="stylesheet" /> <link href="style/headerbar.css" type="text/css" rel="stylesheet" /> <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript" src="js/ie6Fixpng.js"></script> <![endif]--> <script src="js/move.js"></script> <script> window.onload=function() { //布局转换 var oDiv=document.getElementById('div1'); var oUl=oDiv.children[0]; var aLi=oUl.children; var now=0; for(var i=0; i<aLi.length; i++) { aLi[i].style.left=aLi[i].offsetLeft+'px'; if(i>=12) { aLi[i].style.top='400px'; } else { aLi[i].style.top=parseInt(i/4)*200+'px'; } } for(var i=0; i<aLi.length; i++) { aLi[i].style.position="absolute"; } //8以后隐藏 for(var i=8; i<aLi.length; i++) { aLi[i].style.filter='alpha(opacity=0)'; aLi[i].style.opacity=0; } oUl.className='list'; //按钮 var aBtn=oDiv.children[1].children; aBtn[0].onclick=function(){ var i=now+8; if(now==0) { return; } var timer=setInterval(function(){ if(i<now) startMove(aLi[i], {top:0, opacity:100}); else if(i<now+4) startMove(aLi[i], {top:200}); else startMove(aLi[i], {top:400, opacity:0}); i--; if(i==now-5) { clearInterval(timer); now-=4; } }, 40); }; aBtn[1].onclick=function(){ var i=now; if(now>=aLi.length-8) { return; } var timer=setInterval(function(){ if(i<now+4) startMove(aLi[i], {top:-200, opacity:0}); else if(i<now+8) startMove(aLi[i], {top:0}); else startMove(aLi[i], {top:200, opacity:100}); i++; if(i==now+12) { clearInterval(timer); now+=4; } }, 40); }; }; </script> </head> <body> <div class="comHeadBar_black"> <a href="" target="_blank" class="fl">查看官网</a> <a href="/" target="_blank" class="fr">by 智</a> </div> <div class="imgListBox" id="div1"> <ul class="list hidden"> <li><a href="javascript:;"><img src="images/photo/01.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/02.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/03.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/04.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/05.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/06.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/07.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/08.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/09.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/10.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/11.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/12.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/13.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/14.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/15.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/16.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/17.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/18.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/19.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/20.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/09.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/10.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/11.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/12.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/13.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/14.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/15.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/16.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/17.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/18.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/19.jpg" alt="www.zhinengshe.com" /></a></li> <li><a href="javascript:;"><img src="images/photo/20.jpg" alt="www.zhinengshe.com" /></a></li> </ul> <div class="page"> <a href="javascript:;" class="prev"></a> <a href="javascript:;" class="next"></a> <span class="prev_ie6"></span> <span class="next_ie6"></span> </div> </div> </body> </html>
左右跳动列表 :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>dddd</title> <link href="style/common.css" type="text/css" rel="stylesheet" /> <link href="style/headerbar.css" type="text/css" rel="stylesheet" /> <!--[if IE 6]> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript" src="js/ie6Fixpng.js"></script> <![endif]--> <script src="js/move.js"></script> <script> window.onload=function() { var oDiv=document.getElementById('div1'); var oNavBox=oDiv.children[0]; var oUl=oDiv.children[1]; var aLi=oUl.children; var opened=false; for(var i=0; i<aLi.length; i++) { if(i%2) aLi[i].style.left=-aLi[0].offsetWidth+'px'; else aLi[i].style.left=aLi[0].offsetWidth+'px'; } oNavBox.onclick=function() { if(opened) { var i=aLi.length-1; var lleft=i%2==0? -aLi[i].offsetWidth:aLi[i].offsetWidth; var timer=setInterval(function(){ startMove(aLi[i], {left:lleft, opacity:0}); i--; if(i==-1) clearInterval(timer); }, 77); } else { var i=0; var timer=setInterval(function(){ startMove(aLi[i], {left:0, opacity:100}); i++; if( i==aLi.length) clearInterval(timer); }, 77); } if(opened) opened=false; else opened=true; }; for(var i=0; i<aLi.length; i++) { aLi[i].onclick=function() { var oSpan=oNavBox.children[0]; oSpan.innerHTML=this.children[0].innerHTML; var i=aLi.length-1; var lleft=i%2==0? -aLi[i].offsetWidth:aLi[i].offsetWidth; var timer=setInterval(function(){ startMove(aLi[i], {left:lleft, opacity:0}); i--; if(i==-1) clearInterval(timer); }, 77); opened=false; }; } }; </script> </head> <body> <div class="comHeadBar"> <a href="" target="_blank" class="fl">查看官网</a> <a href="" target="_blank" class="fr">by 智能</a> </div> <div class="warp" id="div1"> <div class="navBox"> <span><img src="images/ico_01.png" alt="" style="display:none;" />请选择</span> <em class="triangle"><i></i></em> </div> <ul class="navList"> <li><a href="javascript:;"><img src="images/ico_01.png" alt="" />关于我们</a></li> <li><a href="javascript:;"><img src="images/ico_02.png" alt="" />联系我们</a></li> <li><a href="javascript:;"><img src="images/ico_03.png" alt="" />官网首页</a></li> <li><a href="javascript:;"><img src="images/ico_04.png" alt="" />课程案例</a></li> <li><a href="javascript:;"><img src="images/ico_05.png" alt="" />智能公益</a></li> <li><a href="javascript:;"><img src="images/ico_06.png" alt="" />智能论坛</a></li> </ul> </div> </body> </html>
待续...
