js预解析及特效

2023-08-23 11:06:46

预解析：

// 作用域：

// 域：空间、范围、区域……

// 作用：读、写

    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>

图片缩略转示：

 <!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>

 <link href="css/css.css" rel="stylesheet" />

 <script src="js/move.js"></script>

 <script>

 window.onload=function ()

 {

     var oDiv=document.getElementById('box');

     var aPicLi=document.getElementById('pic_list').getElementsByTagName('li');

     var aTxtLi=document.getElementById('text_list').getElementsByTagName('li');

     var oIcoUl=document.getElementById('ico_list').getElementsByTagName('ul')[0];

     var aIcoLi=document.getElementById('ico_list').getElementsByTagName('li');

     var oBtnPrev=document.getElementById('btn_prev');

     var oBtnNext=document.getElementById('btn_next');

     var iNow=0;

     var iNowUlLeft=0;

     oBtnPrev.onclick=function() {

         if(iNowUlLeft>0) {

             iNowUlLeft--;

             //oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';

             fixUlLeft();

         }

     };

     function fixUlLeft()

     {

         oBtnPrev.className=iNowUlLeft==0?'btn':'btn showBtn';

         oBtnNext.className=iNowUlLeft==(aIcoLi.length-7)?'btn':'btn showBtn';

         miaovStartMove(oIcoUl, {left: -aIcoLi[0].offsetWidth*iNowUlLeft}, MIAOV_MOVE_TYPE.BUFFER);

     }

     oBtnNext.onclick=function() {

         if(iNowUlLeft<aIcoLi.length-7) {

             iNowUlLeft++;            //oIcoUl.style.left=-aIcoLi[0].offsetWidth*iNowUlLeft+'px';

             fixUlLeft();

         }

     };

     for(var i=0; i<aIcoLi.length; i++)

     {

         aIcoLi[i].index=i;

         aIcoLi[i].onclick=function() {

             if(iNow==this.index) {

                 return;

             }

             iNow=this.index;

             tab();

         };

     }

     function tab() {

         for(var i=0; i<aIcoLi.length; i++)

             {

                 if(i==iNow) {

                     aIcoLi[iNow].className='active';

                     aTxtLi[iNow].getElementsByTagName('h2')[0].className='show';

                     //aPicLi[this.index].style.filter='alpha(opacity:100)';

                     //aPicLi[this.index].style.opacity=100;

                     miaovStartMove(aPicLi[iNow], {opacity:100}, MIAOV_MOVE_TYPE.BUFFER);

                 } else {

                     aIcoLi[i].className='';

                     aTxtLi(i).getElementsByTagName('h2')[0].className='';

                     aPicLi[i].style.filter='alpha(opacity:0)';

                     aPicLi[i].style.opacity=0;

                     miaovStopMove(aPicLi[i]);

                 }

             }

     }

     function autoPlay() {

         iNow++;

         if(iNow>=aIcoLi.length)

             iNow=0;

         if(iNow<iNowUlLeft)

             iNowUlLeft=iNow;

         else if(iNow>=iNowUlLeft+7)

             iNowUlLeft=iNow-6;

         fixUlLeft();

         tab();

     }

     var timer=setInterval(autoPlay, 3000);

     oDiv.onmouseover=function(){

         clearInterval(timer);

     };

     oDiv.onmouseout=function(){

         timer=setInterval(autoPlay, 3000);

     };

 };

 </script>

 </head>

 <body>

 <div id="box">

     <ul id="pic_list">

         <li style="z-index:2;opacity:1;fliter:alpha(opacity=100);">

             <a href="http://www.miaov.com"><img src="img/pic_1.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_2.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_3.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_4.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_5.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_6.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_7.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_8.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_9.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_10.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_11.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_12.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_13.jpg" alert="我是你"/></a>

         </li>

         <li>

             <a href="http://www.miaov.com"><img src="img/pic_14.jpg" alert="我是你"/></a>

         </li>

     </ul>

     <div class="mark"></div>

     <ul id="text_list">

         <li><h2 class="show"><a href="#">《武则天秘史》[至22集]姐姐与皇上偷情，媚娘抓奸在床...</a></h2></li>

         <li><h2><a href="#">《无底洞》金钱、美女、权利、复仇等欲望让人不可自拔...</a></h2></li>

         <li><h2><a href="#">《巴黎宝贝》邓超巴黎当奶爸，上演基情、卖萌、跨国恋..</a></h2></li>

         <li><h2><a href="#">《我的女儿是花儿》[至3集]“富二代”冰王子恋上贫家女..</a></h2></li>

         <li><h2><a href="#">《法证先锋3》[至26集]写字楼惊现“女僵尸”尸体！</a></h2></li>

         <li><h2><a href="#">《非常了得》孟非郭德纲大曝台下私生活，内地Hold姐来挑战</a></h2></li>

         <li><h2><a href="#">第二届九分钟电影11月20日独家首映 视觉盛宴恭迎各位看官</a></h2></li>

         <li><h2><a href="#">《快女微电影》 洪辰脸伤痊愈 快女微电影收官作复拍</a></h2></li>

         <li><h2><a href="#">《称心如意》京城第一“育婴男”Hold住全场 萝莉热舞走光</a></h2></li>

         <li><h2><a href="#">《男人帮》[全30集]悲喜双响炮，一个完美结局</a></h2></li>

         <li><h2><a href="#">《辛亥革命》成龙、赵文瑄、李冰冰、胡歌演绎革命腥风血雨</a></h2></li>

         <li><h2><a href="#">《李献计历险记》房祖名患差时症为寻女友开启超时空冒险</a></h2></li>

         <li><h2><a href="#">Justin bieber女友动感热单全球首发。</a></h2></li>

         <li><h2><a href="#">第八届中国（重庆）国际园林博览会</a></h2></li>

     </ul>

     <div id="ico_list">

         <ul>

             <li class="active"><a href="#"><img src="img/ico_1.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_2.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_3.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_4.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_5.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_6.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_7.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_8.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_9.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_10.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_11.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_12.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_13.jpg" alt="我是你"/></a></li>

             <li><a href="#"><img src="img/ico_14.jpg" alt="我是你"/></a></li>

         </ul>

     </div>

     <a href="#" id="btn_prev" class="btn"></a>

     <a href="#" id="btn_next" class="btn showBtn"></a>

 </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>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>放大镜 - 预览 -mingliu</title>

 <style type="text/css">

 *{ margin:0;}

 #div1 { width: 200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative;}

 #div1 .small_pic { width: 200px; height: 200px; background: #eee; position: relative;}/**<!--放小图片-->*/

 #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;}/**<!--放小方块-->>*/

 #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;}/**<!--放遮罩层-->>*/

 #div1 .big_pic { position: absolute; top: -1px; left: 215px; width:250px; height:250px; overflow:hidden; border:2px solid #CCC; display:none; }/**<!--放大图-->>*/

 #div1 .big_pic img { position:absolute; top: -30px; left: -80px; }

 </style>

 <script type="text/javascript">

 function getByClass(oParent, sClass)

 {

     var aEle=oParent.getElementsByTagName('*');//*得到指定oParent对象下的所有对象

     var aTmp=[];  //存放被选中sClass类的对象

     var i=0;

     for(i=0;i<aEle.length;i++)

     {

         if(aEle[i].className==sClass)

         {

             aTmp.push(aEle[i]);//找到就push到数组中

         }

     }

     return aTmp;

 }

 window.onload=function ()

 {

     var oDiv=document.getElementById('div1');

     var oMark=getByClass(oDiv, 'mark')[0];

     var oFloat=getByClass(oDiv, 'float_layer')[0];

     var oBig=getByClass(oDiv, 'big_pic')[0];

     var oSmall=getByClass(oDiv, 'small_pic')[0];

     var oImg=oBig.getElementsByTagName('img')[0];

     oMark.onmouseover=function() {

         oFloat.style.display="block";

         oBig.style.display="block";

     };

     oMark.onmouseout=function() {

         oFloat.style.display="none";

         oBig.style.display="none";

     };

     oMark.onmousemove=function(ev){

         var oEvent=ev||event;

         var curX=oEvent.clientX-oDiv.offsetLeft-oSmall.offsetLeft-oFloat.offsetWidth/2;

         var curY=oEvent.clientY-oDiv.offsetTop-oSmall.offsetTop-oFloat.offsetHeight/2;

         if(curX<0)

             curX=0;

         else if(curX>oMark.offsetWidth-oFloat.offsetWidth)

             curX=oMark.offsetWidth-oFloat.offsetWidth;

         if(curY<0)

             curY=0;

         else if(curY>oMark.offsetHeight-oFloat.offsetHeight)

             curY=oMark.offsetHeight-oFloat.offsetHeight;

         oFloat.style.left=curX+'px';

         oFloat.style.top=curY+'px';

         //大图移动的比率：curX:实际移动宽|高；oMark.offsetWidth-oFloat.offsetWidth（遮罩宽|高-浮动层宽|高：实际小图上总移动宽|高）  实际/总宽高就是比率

         var percentX=curX/(oMark.offsetWidth-oFloat.offsetWidth);

         var percentY=curY/(oMark.offsetHeight-oFloat.offsetHeight);

         //大图移动大小,限制范围，防止大图出现空白部分。

         oImg.style.left=-percentX*(oImg.offsetWidth-oBig.offsetWidth)+'px';

         oImg.style.top=-percentY*(oImg.offsetHeight-oBig.offsetHeight)+'px';

     };

 };

 </script>

 </head>

 <body>

 <div id="div1">

     <div class="small_pic">

         <span class="mark"></span>

         <span class="float_layer"></span>

         <img src="data:images/small.png" alt="放大镜 - 预览 -mingliu" longdesc="放大镜 - 预览 -mingliu" />

     </div>

     <div class="big_pic">

         <img src="data:images/big.png" alt="放大镜 - 预览 -mingliu" longdesc="放大镜 - 预览 -mingliu" />

     </div>

 </div>

 </body>

 </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="data:images/photo/01.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/02.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/03.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/04.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/05.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/06.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/07.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/08.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/09.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/10.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/11.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/12.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/13.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/14.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/15.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/16.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/17.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/18.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/19.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/20.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/09.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/10.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/11.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/12.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/13.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/14.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/15.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/16.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/17.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/18.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data:images/photo/19.jpg" alt="www.zhinengshe.com" /></a></li>

        <li><a href="javascript:;"><img src="data: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="data: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="data:images/ico_01.png" alt="" />关于我们</a></li>

        <li><a href="javascript:;"><img src="data:images/ico_02.png" alt="" />联系我们</a></li>

        <li><a href="javascript:;"><img src="data:images/ico_03.png" alt="" />官网首页</a></li>

        <li><a href="javascript:;"><img src="data:images/ico_04.png" alt="" />课程案例</a></li>

        <li><a href="javascript:;"><img src="data:images/ico_05.png" alt="" />智能公益</a></li>

        <li><a href="javascript:;"><img src="data:images/ico_06.png" alt="" />智能论坛</a></li>

    </ul>

</div>

</body>

</html>

待续...

码农公寓

相关文章