JS鼠标悬停滑动效果导航条特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS鼠标悬停滑动效果导航条特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS鼠标悬停滑动效果导航条</title>
<link rel="stylesheet" href="css/sNav.css">
<script src="js/sNav.min.js"></script>
</head>
<body>
<div id="header">
	<img src="images/sNav.png" alt="" id="headImg">
	<h1>sNav</h1>
	<h2>这是一个简单的原生JavaScript插件，它可以用作导航栏，也可以作为按钮组，搭好结构后，只需要一些十分简单的设置即可让你的导航栏炫酷起来（兼容IE8及以上），简单好用，快来下载用起来吧。</h2>
</div>

<ul class="sNav">
	<a href="#"><li>sNav</li></a>
	<a href="#"><li>导入sNav.js</li></a>
	<a href="#"><li>搭建结构</li></a>
	<a href="#"><li>执行语句</li></a>
	<a href="#"><li>简单使用</li></a>
	<a href=""><li>sNav.js</li></a>
	<a href=""><li>sNav.min.js</li></a>
</ul>

<div id="part1"  class="part">
	<h2>一句话使用sNav</h2>
	<div class="partWrap">
		<h3>1.导入sNav.js</h3>
		<pre style="text-align:center;">&lt;script src="somewhere/js/sNav.js &gt; &lt;/script&gt;</pre>
		<h3>2.将结构搭好</h3>
		<pre class="p1pre1" style="font-size:18px;">
&lt;ul class="example1"&gt;

	&lt;a href="#"&gt; &lt;li>HOME&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li&gt;COMMUNITY&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li>MUSIC&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li>PHOTOGRAPHY&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li>NEWS&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li>MESSAGE&lt;/li&gt; &lt;/a&gt;

	&lt;a href="#"&gt; &lt;li>NOTICE&lt;/li&gt; &lt;/a&gt;

&lt;/ul&gt;
		</pre>
		<pre class="p1pre1" id="p1pre1Right">
			<strong>
.sNav{
	background: rgb(0, 216, 224); 
	height: 60px; 
	padding: 0;
	margin: 0 auto; 
	width: 1059px;
}
.sNav>a{
	font-size: 20px;
	list-style: none;
	float: left;
	text-decoration: none;
	position: relative;
	font-weight: bold;
	overflow: hidden;
}
.sNav>a li{
	background: rgb(0, 216, 224);
	padding: 0px 30px;
	text-align: center;
	color: white;
	height: 60px;
	line-height:60px;
}
.sNav>a span{
	background: #FFB739;
	text-align: center;
	color: white;
	display: block;
}
			</strong>			
		</pre>
	</div>
	<ul class="example1">
		<a href="#"><li>HOME</li></a>
		<a href="#"><li>COMMUNITY</li></a>
		<a href="#"><li>MUSIC</li></a>
		<a href="#"><li>PHOTOGRAPHY</li></a>
		<a href="#"><li>NEWS</li></a>
		<a href="#"><li>MESSAGE</li></a>
		<a href="#"><li>NOTICE</li></a>
	</ul>
	<h3 id="p1h2">3.只需执行这条语句</h3>
	<pre id="p1pre2">var example1 = new sNav('example1');<button id="example1Btn">点击执行这条语句</button></pre>
	<h3 id="p1h3">4.再把鼠标移上去看看</h3>
	<img id="part1arrow" src="images/arrow.png" height="300" width="200px" alt="" />
</div>
<div id="part2" class="part">
	<h2>sNav的设置</h2>
	<div class="row">
		<div class="left">
			<h4>设置原按钮样式</h4>
			<p>原按钮的样式设置，取决于对ul下的a和li的设置。需要设置好浮动、元素宽度、高度、填充、背景、行高等属性</p>
		</div>
		<div class="right">
			<pre>
.example2 { height:60px; margin: 20px auto; width:1059px; }

.example2 > a { font-size:20px; list-style: none; float:left;  text-decoration: none;
	position: relative; font-weight:bold; overflow: hidden; }

.example2 > a li { background:rgb(0, 216, 224); padding:0px 30px; text-align: center;
	color:white; height: 60px; line-height:60px; }</pre>
		</div>
	</div>
	<div class="row">
		<div class="left">
			<h4>设置hover时按钮的样式</h4>
			<p>设置hover时滑入的按钮样式，只需要为设置a下的span添加样式，通常只需要设置背景颜色和文字大小颜色</p>
		</div>
		<div class="right">
			<pre>
.example2 > a span { background:#FFB739; text-align: center; color: white; }
			</pre>
		</div>
	</div>
	<div class="row">
		<div class="left">
			<h4>设置特殊的移入文字效果</h4>
			<p>如果你不想让移入效果一成不变，你可以通过这个方法，自定义设置移入元素内的文字</p>
		</div>
		<div class="right">
			<pre>example2.setText({
"1":"abc",
"4":"hehe"
});</pre>
		</div>
	</div>
	<div class="row">
		<div class="left">
			<h4>设置效果预览</h4>
			<div class="example2wrap">
				<ul class="example2">
					<a target="_blank" href="#"><li>sNav.js</li></a>
					<a href="#"><li>sHover</li></a>
					<a href="#"><li>我的博客</li></a>
				</ul>		
			</div>
		</div>
		<script>
		var example2=new sNav('example2');
		example2.setText({
			"0":"下载(2.1k)",
			"1":"这是啥",
			"2":"去逛逛"
		});
		</script>
		<div class="right">
			<pre>example1.setText({
"0":"下载(3.2k)",
"1":"这是啥",
"2":"去逛逛"
});</pre>
		</div>
	</div>
</div>
<script>
	var sNav1=new sNav('sNav');
	sNav1.setText({
		"5":"下载(3.5k)",
		"6":"下载(2.1k)"
	});

	//-------------------------
	var example1Btn=document.getElementById('example1Btn');
	example1Btn.onclick=function(){
		var example1=new sNav('example1');
	}
</script>
</body>
</html>

JS代码(sNav.min.js):

function sNav(k){
	var f=this;
	var b=f.getByClass(document,k)[0];
	var l=b.getElementsByTagName("li");
	this.aHoverItem=[];
	this.aA=b.getElementsByTagName("a");
	for(var e=0;
	e<l.length;
	e++){
	var g=l[e].offsetWidth;
	var d=b.offsetHeight;
	var j={
	"top":f.getStyle(l[e],"paddingTop"),"right":f.getStyle(l[e],"paddingRight"),"bottom":f.getStyle(l[e],"paddingBottom"),"left":f.getStyle(l[e],"paddingBottom")}
;
	var c=document.createElement("span");
	this.aHoverItem.push(c);
	var a=document.createElement("div");
	this.aA[e].appendChild(a);
	a.appendChild(c);
	a.appendChild(l[e]);
	a.style.position="absolute";
	a.style.background="yellow";
	this.aA[e].style.width=g+"px";
	this.aA[e].style.height=d+"px";
	a.style.top=-d+"px";
	a.slideHeight=d;
	l[e].style.padding="0";
	l[e].style.lineHeight=d+"px";
	c.style.height=d+"px";
	c.style.width=g+"px";
	c.style.display="block";
	c.style.lineHeight=d+"px";
	c.innerHTML=this.hoverText?this.hoverText:l[e].innerHTML;
	function h(i){
	f.myAddEvent(i,"mouseover",function(m){
	f.hoverIn(m,i)}
);
	f.myAddEvent(i,"mouseout",function(m){
	f.hoverOut(m,i)}
)}
h(a)}
this.slideSpeed=8}
sNav.prototype.setText=function(b){
	for(var a in b){
	this.aHoverItem[a].innerHTML=b[a]}
}
;
	sNav.prototype.hoverIn=function(a,b){
	this.startMove(b,{
	"top":0}
)}
;
	sNav.prototype.hoverOut=function(a,b){
	this.startMove(b,{
	"top":-b.slideHeight}
)}
;
	sNav.prototype.startMove=function(f,c,d){
	var h;
	var e;
	var a=this.slideSpeed;
	var b=20;
	var g=this;
	clearInterval(f.moveTimer);
	f.moveTimer=setInterval(function(){
	var j=true;
	for(var i in c){
	var l=g.getStyle(f,i);
	var k=c[i];
	h=parseInt(l,10);
	if(h!=k){
	j=false}
if(j){
	clearInterval(f.moveTimer);
	d&&d()}
else{
	e=(k-h)/a;
	e=k>h?Math.ceil(e):Math.floor(e);
	f.style[i]=(h+e)+"px"}
}
}
,b)}
;
	sNav.prototype.myAddEvent=function(c,a,b){
	if(c.attachEvent){
	c.attachEvent("on"+a,function(){
	b.call(this)}
)}
else{
	c.addEventListener(a,b,false)}
}
;
	sNav.prototype.getByClass=function(e,d){
	var f=[];
	var a=e.getElementsByTagName("*");
	var c=new RegExp("\\b"+d+"\\b",b);
	for(var b=0;
	b<a.length;
	b++){
	if(c.test(a[b].className)){
	f.push(a[b])}
}
return f}
;
	sNav.prototype.getStyle=function(c,a){
	var b;
	if(window.getComputedStyle){
	b=getComputedStyle(c,false)[a]}
else{
	b=c.currentStyle[a]}
b=parseInt(b,10);
	return b}
;

CSS代码(sNav.css):

.sNav{height:60px;margin:20px auto;width:1059px;}
.sNav>a{font-size:20px;list-style:none;float:left;text-decoration:none;position:relative;font-weight:bold;overflow:hidden;}
.sNav>a li{background:rgb(0,216,224);padding:0px 30px;text-align:center;color:white;height:60px;line-height:60px;}
.sNav>a span{background:#FFB739;text-align:center;color:white;}
/*example1*/
.example1{height:60px;padding:0;margin:0 auto;width:1060px;}
.example1>a{font-size:20px;list-style:none;float:left;text-decoration:none;position:relative;font-weight:bold;overflow:hidden;}
.example1>a li{background:rgb(108,150,180);padding:0px 30px;text-align:center;color:white;height:60px;line-height:60px;}
.example1>a span{background:#FFA683;text-align:center;color:white;display:block;}
/*example2*/
.example2{height:60px;padding:0;margin:0 auto;width:1060px;}
.example2>a{font-size:20px;list-style:none;float:left;text-decoration:none;position:relative;font-weight:bold;overflow:hidden;}
.example2>a li{background:rgb(0,216,224);padding:0px 30px;text-align:center;color:white;height:60px;line-height:60px;}
.example2>a span{background:#FFB739;text-align:center;color:white;display:block;}
/*---------------------------------------------------*/
body{margin:0;padding:0;}
#header{height:400px;text-align:center;text-shadow:0px 1px 2px rgba(0,0,0,0.2);background:#FFFCED;margin:0;overflow:hidden;}
#header h1{font-size:50px;margin:0;text-align:center;padding:0;}
#headImg{margin:40px auto 20px;display:block;}
#header h2{font-size:20px;max-width:900px;padding:0;font-weight:normal;margin:30px auto 0;line-height:1.5em;color:#555;}
#headBtn{padding:10px;background:#E04E5E;border-radius:10px;text-decoration:none;font-family:"arial";color:white;position:relative;top:20px;font-style:20px;}
#headBtn:hover{background:#FF5F5F}
/*---------part1---------*/
pre{background:#FF7676;color:white;padding:20px;border-radius:10px;font-family:'Comic Sans MS';font-size:14px;}
pre strong{color:#239CBD;font-weight:normal;}
#part1{background:#ECFCFF;min-height:400px;position:relative;}
.part h2{color:#555;font-size:30px;padding:30px 30px 0;text-align:center;}
.part h3{color:#004666;margin:30px;text-align:center;clear:both;}
.partWrap{width:1060px;margin:20px auto;}
#part1 .example1{clear:both;}
.p1pre1{width:450px;float:left;}
#p1pre1Right{float:right;}
#p1pre2{width:300px;margin:10px auto;position:relative;border-radius:10px 10px 0 0;margin-bottom:50px;text-align:center;}
#p1pre2 button{width:340px;height:61px;position:absolute;right:-100px;top:61px;border:none;left:0;border-radius:0 0 10px 10px;background:powderblue;font-size:20px;font-weight:bold;color:firebrick;font-family:'arial';border-bottom:10px solid #8FDBE6;}
#p1pre2 button:hover{background:#9FEDEB;}
#part1arrow{display:none;position:absolute;top:460px;left:400px;}
#p1h3{padding:30px;}
/*--------part2--------*/
#part2{}
.row{overflow:hidden;width:80%;margin:10px auto;}
.row .left{float:left;width:50%;text-align:center;}
.row .left p{padding-right:20px;}
.row .left h4{font-size:18px;color:#FF7676;}
.row .right{float:left;width:50%;}
.example2wrap{width:420px;margin:-10px auto;}
.example2{margin-left:20px;float:left;}
.example2 .intro2{background:#F08787;}
.example2prev{margin-left:0;float:left;width:200px;height:100px;background:#CCC;}
.intro2prev{background:#F08787;}
/*---------------------------------*/
.footer{min-height:300px;margin-top:50px;background:#FFFDE2;padding-bottom:50px;text-align:center;}
.footer h1{font-size:60px;color:white;margin:0;padding-top:50px;text-align:center;text-shadow:0 3px 5px #888;}
.footer h2{text-align:center;padding:10px 0 0;color:#2D8AB1;}
.footer h3{text-align:center;padding:0px;color:#555;font-weight:normal;}
#gitHubIcon{width:90px;height:90px;}
.downloadBtn button{padding:8px;font-size:18px;color:#26677B;font-weight:bold;font-family:"Arial";background:powderblue;border:none;border-radius:10px;border-bottom:4px solid #62CBD8}
.downloadBtn button:hover{background:#99E1FF;}
.downloadBtn a{font-weight:bold;font-family:"Arial";font-size:18px;text-decoration:none;color:#26677B;}

附件:下载该文件资源,减少时间成本(增值服务)