zoukankan html css js c++ java

js预解析及特效

预解析：

// 作用域：
// 域：空间、范围、区域……
// 作用：读、写

    script        全局变量、全局函数
        自上而下
    
    函数
        由里到外
    
    {}

    浏览器：
        “JS解析器”
            1）“找一些东西”    ：var  function 参数
            
                            a = ...
                                    所有的变量，在正式运行代码之前，都提前赋了一个值：未定义

                            fn1 = function fn1(){ alert(2); }
                                    所有的函数，在正式运行代码之前，都是赋整个函数块

                            JS 的预解析

                        遇到重名的：只留一个
                            变量和函数重名了，就只留下函数
                                    
            2）逐行解读代码：
                        表达式：= + - * / % ++ -- ! 参数……
                        
                        表达式可以修改预解析的值！
            
            if{} for{} dowhile{} 不是作用域

View Code

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>

View Code

图片缩略转示：

  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>

View Code

图片缩放实例：

 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 {  200px; height: 200px; padding: 5px; border: 1px solid #ccc; position: relative;}
 9 
10 #div1 .small_pic {  200px; height: 200px; background: #eee; position: relative;}/**<!--放小图片-->*/
11 #div1 .float_layer {  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 {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; 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>

View Code

图片上下转示：

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

View Code

左右跳动列表 :

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

View Code

待续...

查看全文

相关阅读:
【图像处理】【SEED-VPM】7.ubuntu10.04下 TFTP,NFS 安装指南
 【图像处理】【SEED-VPM】6.文件目录结构
 【DIY】【外壳】木板 & 亚克力加工
 【图像处理】【SEED-VPM】5.uImage的烧写 & NFS烧写文件系统
 【PCB】【AD使用】Altium Designer 的entry sheet ，offsheet和port作用
 【PCB】【项目记录】AWG任意波形产生器
 【图像处理】【SEED-VPM】4.串口调试信息
 【图像处理】【SEED-VPM】3.外设信息
 【图像处理】【SEED-VPM】2.接口
 【图像处理】【SEED-VPM】1.注意点

原文地址：https://www.cnblogs.com/codc-5117/p/4143925.html