导航栏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的主要内容，如果未能解决你的问题，请参考以下文章