导航栏4种效果---原生js

Posted 瞅我干啥?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了导航栏4种效果---原生js相关的知识,希望对你有一定的参考价值。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>无标题文档</title>
 6 <style>
 7 *{margin:0;padding:0; list-style:none;}
 8 ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
 9 ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3; height:40px;}
10 #box li{z-index:2; height:0;}
11 .ha{border-left:2px solid #000;}
12 .he{border-right:2px solid #000;}
13 </style>
14 <script src="move.js"></script>
15 <script>
16     function rnd(n,m){
17         return Math.floor(Math.random()*(m-n)+n);    
18     }
19     window.onload=function(){
20         var oUl=document.getElementById(ul1);
21         var aLi=oUl.children;
22         var oBox=document.getElementById(box);
23         var aLi1=oBox.children;
24         for(var i=0;i<aLi.length;i++){
25             (function(index){
26                 aLi[i].onmouseover=function(){
27                     aLi1[index].style.background=rgb(+rnd(1,256)+,+rnd(1,256)+,+rnd(1,256)+);
28                     move(aLi1[index],{height:40});    
29                 };    
30             })(i);
31             (function(index){
32                 aLi[i].onmouseout=function(){
33                     move(aLi1[index],{height:0});    
34                 };    
35             })(i);    
36         }    
37     };
38 </script>
39 </head>
40 
41 <body>
42 <div>
43     <ul id="ul1">
44         <li class="ha">李少杰</li>
45         <li>张茜</li>
46         <li>大肥肥</li>
47         <li class="he">真噗噗</li>
48     </ul>
49    <ul id="box">
50         <li class="ha"></li>
51         <li></li>
52         <li></li>
53         <li class="he"></li>
54    </ul>
55 </div>
56 </body>
57 </html>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
ul{width:410px; background:#ccc; position:absolute;top:300px; left:300px;}
ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3; height:40px;}
#box{top:341px; left:300px;}
#box li{ z-index:2; display:none;}
.ha{border-left:2px solid #000;}
.he{border-right:2px solid #000;}
</style>
<script src="move.js"></script>
<script>
    function rnd(n,m){
        return Math.floor(Math.random()*(m-n)+n);    
    }
    window.onload=function(){
        var oUl=document.getElementById(‘ul1‘);
        var aLi=oUl.children;
        var oBox=document.getElementById(‘box‘);
        var aLi1=oBox.children;
        for(var i=0;i<aLi.length;i++){
            (function(index){
                aLi[i].onmouseover=function(){
                    aLi1[index].style.background=‘rgb(‘+rnd(1,256)+‘,‘+rnd(1,256)+‘,‘+rnd(1,256)+‘)‘;
                    aLi1[index].style.float=‘none‘;
                    aLi1[index].style.position=‘absolute‘;
                    aLi1[index].style.display=‘block‘;
                    aLi1[index].style.top=0;
                    aLi1[index].style.left=102*index+‘px‘;
                    move(aLi1[index],{top:-40,left:102*index,opacity:1});    
                };    
                aLi[i].onmouseout=function(){
                    move(aLi1[index],{top:0,left:102*index,opacity:0});    
                };    
            })(i);    
        }
    };
</script>
</head>

<body>
<div>
    <ul id="ul1">
        <li class="ha">李少杰</li>
        <li>张茜</li>
        <li>大肥肥</li>
        <li class="he">真噗噗</li>
    </ul>
    <ul id="box">
        <li class="ha"></li>
        <li></li>
        <li></li>
        <li class="he"></li>
    </ul>
</div>
</body>
</html>



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            overflow: hidden;
            border: 1px solid #ccc;
            width: 300px;
            height: 30px;
            background: #0066FF;
            position: absolute;
        }

        div a {
            width: 40px;
            height: 30px;
            margin-right: 10px;
            line-height: 30px;
            text-align: center;
            float: left;
            text-decoration: none;
            color: #000;
        }

        #move {
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 30px;
            background: rgba(0, 0, 0, .5);
            z-index: 2;
        }
       .red{
           backrgound:red;
       }
    </style>
    <script>
        function getStyle(obj,name){
            if(obj.currentStyle){
                return obj.currentStyle[name];//兼容ie
            }else{
                return getComputedStyle(obj,false)[name];//除ie以外的
            }
        }
        function move1(obj,name,iTarget,time,fn){
        var start=parseFloat(getStyle(obj,name));
        var dis=iTarget-start;
        var count=parseInt(time/30);
        var step=dis/count;
        var n=0;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            n++;
            var cur=start+n*step;
            if(name==‘opacity‘){
                obj.style.opacity=cur;
                obj.style.filter=‘alpha(‘+cur*100+‘)‘;    
            }else{
                obj.style[name]=cur+‘px‘;    
            }
            
            if(n==count){
                clearInterval(obj.timer);
                fn&&fn();    
            }    
        },30);
    }
//end
//多个move改变
function move(obj,json,complete){
        clearInterval(obj.timer);
        complete=complete ||{};
        complete.time=complete.time || 3000;
        complete.easeing = complete.easeing || ‘ease-in‘;
        var start={};
        var dis={};
        for(var name in json){
            start[name]=parseFloat(getStyle(obj,name));
            dis[name]=json[name]-start[name];
        }
        var count=parseInt(complete.time/30);
        var n=0;
        obj.timer=setInterval(function(){
            n++;
            for(var name in json){
                switch(complete.easeing){
                    case ‘linear‘:
                        var a=n/count;
                        var cur =start[name]+dis[name]*a;
                        break;
                    case ‘ease-in‘:
                        var a=n/count;
                        var cur =start[name]+dis[name]*a*a*a;
                        break;
                    case ‘ease-out‘:
                        var a=1-n/count;
                        var cur =start[name]+dis[name]*(1-a*a*a);
                        break;        
                }
                if(name==‘opacity‘){
                    obj.style.opacity=cur;
                    obj.style.filter=‘alpha(‘+cur*100+‘)‘;    
                }else{
                    obj.style[name]=cur+‘px‘;    
                }
            };
            if(n==count){
                clearInterval(obj.timer);
                complete.fn&& complete.fn();    
            }        
            
        },30);
}
        window.onload = function () {
            var oMove = document.getElementById(‘move‘);
            var oBox = document.getElementById(‘box‘);
            var aA = oBox.children;
            var oOff = true;
            var arr = [];
            for (var i = 0; i < aA.length; i++) {
                arr[i] = {
                    left: aA[i].offsetLeft,
                    top: aA[i].offsetTop
                }
            }
            //console.log(arr);
            //布局转换--float-->定位布局
            for (var i = 0; i < aA.length; i++) {
                aA[i].style.position = ‘absolute‘;
                aA[i].style.left = arr[i].left + ‘px‘;
                aA[i].style.top = arr[i].top + ‘px‘;
                aA[i].style.margin = 0;
                aA[i].style.zIndex = 5;
            }
            for (var i = 0; i < aA.length; i++) {
                aA[i].index = i;
                aA[i].onmouseover = function () {
                    move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
                    this.onoff = false;
                };
                aA[i].onmouseout = function () {
                    if (this.onoff) {
                        move(oMove, {left: aA[this.index].offsetLeft}, {time: 500});
                    } else {
                        move(oMove, {left: 0}, {time: 500, easeing: ‘ease-in‘});
                    }
                };
                aA[i].onclick = function () {
                    this.onoff = true;
                    move(oMove, {left: aA[this.index].offsetLeft}, {time: 500})
                }
            }
        }
    </script>
</head>
<body>
<div id="box">
    <span id="move"></span>
    <a href="javascript:;" class="red">张茜</a>
    <a href="javascript:;">大飞</a>
    <a href="javascript:;">尊尊</a>
    <a href="javascript:;">赵帅</a>
    <a href="javascript:;">魁哥</a>
    <a href="javascript:;">大汉</a>

</div>
</body>
</html>



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0; list-style:none;}
ul{width:408px; margin:50px auto; position:relative; background:#ccc;}
ul li{width:100px; line-height:40px; font-size:20px; text-align:center; float:left;border:1px solid #000; position:relative; z-index:3;}
.pro{position:absolute; top:0; left:0; background:rgba(242,245,12,1);width:100px;height:40px; z-index:1;}
</style>
<script>
var speed=0;
var timer=null;
function move2(obj,dis){
    timer=setInterval(function(){
        if(obj.offsetLeft>dis){
            speed-=(obj.offsetLeft-dis)/5;
            speed*=0.7;    
        }else{
            speed+=(dis-obj.offsetLeft)/5;
            speed*=0.96;        
        }
        if(Math.abs(speed)<1&&obj.offsetLeft==dis){
            speed=0;
            clearInterval(timer);    
        }
        obj.style.left=obj.offsetLeft+speed+‘px‘;    
    },30);        
}
window.onload=function(){
    var aLi=document.getElementsByTagName(‘li‘);
    var oZhe=document.getElementById(‘zhe‘);
    for(var i=0;i<aLi.length-1;i++){
        aLi[i].index=i;
        aLi[i].onmouseenter=function(){
            clearInterval(timer);
            move2(oZhe,aLi[0].offsetWidth*this.index);    
        };    
    }    
};
</script>
</head>

<body>
<div>
    <ul>
        <li>李少杰</li>
        <li>张茜</li>
        <li>大肥肥</li>
        <li>真噗噗</li>
        <li class="pro" id="zhe"></li>
    </ul>
</div>
</body>
</html>



 

以上是关于导航栏4种效果---原生js的主要内容,如果未能解决你的问题,请参考以下文章

JS学习笔记: 使用原生JS 实现导航栏下多级分类弹出效果

原生HTML+CSS+JS制作自己的导航主页(源码+步骤详解)

js写导航栏hover效果

原生js实现导航栏吸顶

JS原生代码实现导航高亮

外贸建站之网站导航栏菜单高亮JS实现代码分享