jQuery斜式滑动导航特效代码

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

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

以下是 jQuery斜式滑动导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery斜式滑动导航</title>
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="wrap">
<ul class="nav lifl png">
<li><a class="n1" href="#" title="首页" style="background-position:0px -127px;"></a></li>
<li><a class="n2" href="#" title=""></a></li>
<li><a class="n3" href="#" title="作品展示"></a></li>
<li><a class="n4" href="#" title="服务报价"></a></li>
<li><a class="n5" href="#" title="拍摄花絮"></a></li>
<li><a class="n6" href="#" title="新闻中心"></a></li>
<li><a class="n7" href="#" title="礼服展示"></a></li>
<li><a class="n8" href="#" title="联系我们"></a></li>
</ul>
</div>
</div>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.bp.min.js" type="text/javascript"></script>
</body>
</html>

JS代码(jquery.bp.min.js):

eval(function(p,a,c,k,e,d){
	e=function(c){
	return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if(!''.replace(/^/,String)){
	while(c--){
	d[e(c)]=k[c]||e(c)}
k=[function(e){
	return d[e]}
];
	e=function(){
	return'\\w+'}
;
	c=1}
;
	while(c--){
	if(k[c]){
	p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}
}
return p}
('(j($){
	d(!C.B||!C.B.12){
	e o=t.u;
	t.u=j(b,f,p){
	d(f===\'n-m\'){
	f=\'7\'}
d(f!==\'7\'||!b.D||b.D[f]){
	k o.x(z,y)}
e h=b.h;
	d(!p&&h&&h[f]){
	k h[f]}
k o(b,\'U\',p)+\' \'+o(b,\'T\',p)}
}
e G=$.E.A;
	$.E.A=j(a){
	d(\'n-m\'F a){
	a.7=a[\'n-m\'];
	R a[\'n-m\']}
d(\'7\'F a){
	a.7=\'(\'+a.7}
k G.x(z,y)}
;
	j v(c){
	c=c.q(/X|Y/g,\'w\');
	c=c.q(/13|Z/g,\'11%\');
	c=c.q(/([0-9\\.]+)(\\s|\\)|$)/g,"$P$2");
	e l=c.W(/(-?[0-9\\.]+)(N|\\%|H|O)\\s(-?[0-9\\.]+)(N|\\%|H|O)/);
	k[I(l[1],10),l[2],I(l[3],10),l[4]]}
$.5.V.7=j(5){
	d(!5.J){
	e 6=$.u(5.b,\'7\');
	d(!6){
	6=\'w w\'}
6=v(6);
	5.6=[6[0],6[2]];
	e 8=v(5.L.M==Q?5.8:5.L.M.7);
	5.8=[8[0],8[2]];
	5.r=[8[1],8[3]];
	5.J=S}
e i=[];
	i[0]=((5.8[0]-5.6[0])*5.K)+5.6[0]+5.r[0];
	i[1]=((5.8[1]-5.6[1])*5.K)+5.6[1]+5.r[1];
	5.b.h.7=i[0]+\' \'+i[1]}
}
)(t);
	',62,66,'|||||fx|start|backgroundPosition|end||prop|elem|strg|if|var|name||style|nowPosX|function|return|res|position|background|oldCurCSS|force|replace|unit||jQuery|curCSS|toArray|0px|apply|arguments|this|animate|defaultView|document|currentStyle|fn|in|oldAnim|em|parseFloat|bgPosReady|pos|options|curAnim|px|pt|1px|undefined|delete|true|backgroundPositionY|backgroundPositionX|step|match|left|top|bottom||100|getComputedStyle|right'.split('|'),0,{
}
))$(function(){
	$(".nav a").not(".hover").hover(function(){
	$(this).stop().animate({
	'backgroundPosition':'(-125px 0)'}
,200);
}
,function(){
	$(this).stop().animate({
	'backgroundPosition':'(0 -127px)'}
,100);
}
);
}
);

CSS代码(style.css):

.clearfix{zoom:1;}
.clearfix:after{content:'\20';display:block;clear:both;}
*{margin:0;padding:0;-webkit-text-size-adjust:none;word-wrap:break-word;word-break:normal;}
a{text-decoration:none;outline:none;cursor:pointer;}
a:hover,img{border:none;}
html{overflow-x:hidden;background-color:#fff;}
ul,ol,dl{list-style-type:none;}
.fl,.fr,.lifl li{float:left;display:inline;}
.fr{float:right;}
ul.nav{position:absolute;left:280px;top:10px;width:776px;}
ul.nav li{width:97px;height:127px;position:relative;}
ul.nav a{width:161px;height:127px;display:block;position:absolute;left:-32px;}
ul.nav a.n1{background:url(../images/n1.png) 0 -127px no-repeat;}
ul.nav a.n2{background:url(../images/n2.png) 0 -127px no-repeat;}
ul.nav a.n3{background:url(../images/n3.png) 0 -127px no-repeat;}
ul.nav a.n4{background:url(../images/n4.png) 0 -127px no-repeat;}
ul.nav a.n5{background:url(../images/n5.png) 0 -127px no-repeat;}
ul.nav a.n6{background:url(../images/n6.png) 0 -127px no-repeat;}
ul.nav a.n7{background:url(../images/n7.png) 0 -127px no-repeat;}
ul.nav a.n8{background:url(../images/n8.png) 0 -127px no-repeat;}
ul.nav a.hover{background-position:-125px 0;}

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