运动---第五课时

Javascript简易动态下拉导航栏 　　js的导航栏效果很炫，当然纯CSS同样可以制作下拉菜单，下面开始讲解导航栏的结构代码，创建一个无序列表，列表下面有三个li，li里面有不同数目的子项目。简单易懂。

<body>
<ul id="ul1">
    <li>首页
        <div>
            武汉<br />
            长沙<br />
            上海<br />
            杭州<br />
            成都<br />
            杭州<br />
            成都<br />
        </div>
    </li>
    <li>客户端
        <div>
            武汉<br />
            长沙<br />
            上海<br />
            杭州<br />
            成都<br />
        </div>
    </li>
    <li>关于我们
        <div>
            武汉<br />
            长沙<br />
            杭州<br />
            成都<br />
        </div>
    </li>
</ul>
</body>
html结构

下面是CSS代码使用通配符来重置所有的不同浏览器的默认样式，当然了，不推荐这种方法，只是为了方便，一般的重置样式都会有专门的CSS文件。这里主要是把li浮动，然后相对定位，li里面的div绝对定位，然后宽度100%自适应。

1 <style>
2     *{margin:0;padding:0;}
3     #ul1{width:300px;height:20px;background:#006600;border:1px solid #3300FF;list-style:none;color:#CCCCCC;}
4     #ul1 li{width:100px;height:20px;float:left;position:relative;}
5     #ul1 li div{height:0;position:absolute;top:20px;overflow:hidden;filter:alpha(opacity:0);opacity:0;background:#000099;width:100%;}
6 </style>
CSS

下面是js的代码，当然了，需要引入运动框架，下面附上运动框架，不理解的可以看这里。

 1 // JavaScript Document
 2 /**
 3  * @author miaov
 4  */
 5 function getStyle(obj, attr)
 6 {
 7     if(obj.currentStyle)
 8     {
 9         return obj.currentStyle[attr];
10     }
11     else
12     {
13         return getComputedStyle(obj, false)[attr];
14     }
15 }
16 
17 function startMove(obj, json, fn)
18 {
19     clearInterval(obj.timer);
20     obj.timer=setInterval(function (){//如果有多个运动一起行动，那么会因为值的不同而停止后面的运动，最先到达目标的运动停止，其他的运动也会相应的停止，从而影响最后的结果不是预想的那样。
21         var bStop=true;        //这一次运动就结束了——所有的值都到达了
22         for(var attr in json)
23         {
24             //1.取当前的值
25             var iCur=0;
26             
27             if(attr=='opacity')
28             {
29                 iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
30             }
31             else
32             {
33                 iCur=parseInt(getStyle(obj, attr));
34             }
35             
36             //2.算速度
37             var iSpeed=(json[attr]-iCur)/8;
38             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
39             
40             //3.检测停止
41             if(iCur!=json[attr])
42             {
43                 bStop=false;
44             }
45             
46             if(attr=='opacity')
47             {
48                 obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
49                 obj.style.opacity=(iCur+iSpeed)/100;
50             }
51             else
52             {
53                 obj.style[attr]=iCur+iSpeed+'px';
54             }
55         }
56         
57         if(bStop)
58         {
59             clearInterval(obj.timer);
60             
61             if(fn)
62             {
63                 fn();
64             }
65         }
66     }, 30)
67 }
完美运动框架

实例中的js-----首先获取元素，this用来获取当前的li,同时因为每个li下面只有一个div，所以后面为[0],也就是第一个div的意思。需要注意的是，首先div的高度自适应，然后把变量iHeight的值赋给他，然后再次执行高度为0。整个过程通过鼠标移入事件和鼠标移除事件来实现。

 1 <script>
 2     window.onload=function(){
 3         var oUl=document.getElementById('ul1');
 4         var oLi=oUl.getElementsByTagName('li');
 5         var i=0;
 6         for(i=0;i<oLi.length;i++){
 7             oLi[i].onmouseover=function(){
 8                 var oDiv=this.getElementsByTagName('div')[0];//每个li下面只有一个div
 9                 oDiv.style.height='auto';//高度自适应
10                 var iHeight=oDiv.offsetHeight;//offsetHeight就是元素的高度
11                 oDiv.style.height=0;//从零开始运动
12 
13                 startMove(oDiv, {opacity: 100, height:iHeight});}
14                 
15                 
16             oLi[i].onmouseout=function(){
17                 var oDiv=this.getElementsByTagName('div')[0];
18                 startMove(oDiv, {opacity:0, height:0});
19             };
20         }    
21     
22     }
23 </script>

附上效果图

Js动画方块

整个效果的代码。不能通过使用绝对定位来实现每一个li的定位，因为li的数量并不确定，定位的top，left的在不断地变化，给每一个li左浮动。因为要获取top和left值，所以通过offsetleft和offsettop来获取，并且对li进行动态的绝对定位，同时margin值为0，这是为了避免margin值的累加。鼠标移入事件---当鼠标移入的时候，增加宽度和高度，使用负边距，同理，当鼠标移出的时候减少宽度和高度，负边距设置为0即可。其次，需要特别注意的是，当你把鼠标移动到li上面的时候，后面的li会覆盖前面的div，为了解决这种问题，首先定义一个变量，iMinZindex=2;然后，设置this.style.zIndex=iMinZindex++;每次zindex都在累加，但是没有影响，zindex的最大值是2的31次方，没有人会那么无聊不停地点上一个东西几十年。

 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 <style>
 7     *{margin:0;padding:0;}
 8     #ul1{width:324px;position:relative;margin:0 auto;}
 9     #ul1 li{list-style:none;border:4px solid #666666;float:left;width:80px;height:80px;margin:10px;background:#CCCCCC;}
10 </style>
11 <script src="完美运动框架.js"></script>
12 <script>
13     window.onload=function(){
14         var oUl=document.getElementById('ul1');
15         var aLi=oUl.getElementsByTagName('li');
16         var i=0;
17         var iMinZindex=2;
18         
19         for(i=0;i<aLi.length;i++){
20             aLi[i].style.left=aLi[i].offsetLeft+'px';
21             aLi[i].style.top=aLi[i].offsetTop+'px';　　　　//offsetTop已经包括了margin值
22         }
23         for(i=0;i<aLi.length;i++){
24         aLi[i].style.position='absolute';
25         aLi[i].style.margin='0';
26         }
27         
28     
29         for(i=0;i<aLi.length;i++){
30             aLi[i].onmouseover=function ()
31             {
32             this.style.zIndex=iMinZindex++;
33             startMove(this, {width: 160, height: 160, marginLeft: -40, marginTop: -40});
34             };
35         
36         aLi[i].onmouseout=function ()
37             {
38             startMove(this, {width: 80, height:80, marginLeft: 0, marginTop: 0});
39             };
40         };
41         
42     };
43 </script>
44 </head>
45 
46 <body>
47 <ul id="ul1">
48     <li></li>
49     <li></li>
50     <li></li>
51     <li></li>
52     <li></li>
53     <li></li>
54     <li></li>
55     <li></li>
56     <li></li>
57     <li></li>
58     <li></li>
59 </ul>
60 </body>
61 </html>

运行效果图


__EOF__

本文作者：Paxster
本文链接：https://www.cnblogs.com/paxster/archive/2013/06/05/3120098.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   Paxster  阅读(854)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· .NET周刊【3月第1期 2025-03-02】
· [AI/GPT/综述] AI Agent的设计模式综述
点击右上角即可分享
微信分享提示
SQL AI 助手