html 滑动导航效果,jQuery实现的滑块滑动导航效果示例

本文实例讲述了jQuery实现的滑块滑动导航效果。分享给大家供大家参考，具体如下：

www.jb51.net jquery滑动导航

*{margin: 0;padding: 0;box-sizing: border-box;-moz-box-sizing: border-box;}

body {

font: 16px/20px 'Microsoft yahei,微软雅黑';

color: #AFBBBB;

}

ul {

list-style-type: none;

}

ul li {

float: left;

}

a {

text-decoration: none;

color: #AFBBBB;

}

a:hover {

color: #ffffff;

cursor: pointer;

}

.clearfix:before,.clearfix:after {

content:"";

clear: both;

display: table;

height: 0;

zoom: 1;

overflow: hidden;

}

.nav {

width:519px;

margin: 0 auto;

}

.nav ul {

background: gray;

height: 35px;

line-height: 35px;

position: relative;

padding: 0 5px;

}

.nav ul li {

position: relative;

padding: 0 25px;

}

.nav ul li>a {

position: relative;

z-index: 100; /*将a元素的z-index设置比li大，这样hover效果才不会无效*/

}

.nav ul li:last-child {

width: 98px;

height: 90%;

position: absolute;

z-index: 50;

left: 5px;

bottom: 0;

top: 0;

margin: auto;

background: rgba(152,206,170,0.5);

border-radius: 5px;

}

• 幼儿园
• 小学
• 初中
• 高中
• 大学
• 社会

$(function(){

$("ul li:not(:last)").hover(function(){

$("#huaBlock").stop(); //停止正在运行的动画

var curliWidth=$(this).outerWidth(),curleft=$(this).offset().left-$(this).parent().offset().left; //当前li的偏移量减去当前ul的偏移量就是li距离ul的距离

// alert("curleft:"+curleft);

$("#huaBlock").animate({"width":curliWidth,"left":curleft},500);

},function(){

$("#huaBlock").stop();

$("#huaBlock").animate({"width":98,"left": 5},200);

});

});

使用在线HTML/CSS/JavaScript代码运行工具 http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

希望本文所述对大家jQuery程序设计有所帮助。