jQuery实现简单的滑动导航代码（移动端)

1.1应用滑动导航

说明：这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1.效果图

1.1.2.超文本标记语言

！DOCTYPE html html head meta charset=' UTF-8 '标题滑动导航/title/head body ul class=' slid ' lia href=' # ' rel=' external nofollow ' rel=' external nofollow '滑动到岗/a/Li href=' # ' rel='外部不跟随' rel='外部不跟随'滑动到岗/a/li span id='navLine'/span /ul脚本类型=' text/JAVAScript ' src=' http : js/jQuery-1。9 .1 .量滴js '/script/body/html 1。1 .3 .钢性铸铁

style type='text/css' body，div，p { margin:0划水：0;} ul.slid { display: block位置：固定；top : 10pxleft :0 pxright :0 px高度：60 px背景# f2f2f2飞越高度：} ul。滑动李{显示器：内嵌块；宽度： 49%;高度： 40px页边距-top : 10px；向左浮动：文本对齐：中心；飞越：隐藏；} ul。滑动李：第一个孩子{右边框： 1px纯红；} ul.slid阿利{显示：内嵌块；宽度： 120像素；文本装饰：无；高度：37 px线高： 37px颜色： # 898989飞越：隐藏；} ul。滑动阿利：悬停{颜色：红色；} # navLine { height:2px背景色：红色；位置：绝对；底部：7px宽度：0 pxleft:0pxdisplay:none飞越：隐藏；} /style1.1.4. jQuery

脚本类型=' text/JavaScript ' $(function(){ NavSlid()；});//滑动导航var nav slid=function(){ var n line=$(' # nav line ')；var lia=$('ul.slid阿利');//初始化滑块在线。CSS({ ' width ' : lia。width()，' left ' : par sent(lia。位置().左)});$('ul.slid阿利')。mouseenter(函数(){ //显示滑块if(nline。CSS(' display ')==' none '){ nline。show()；};//移动滑块nline.stop().制作动画({ width: $(this)).width()，left: parseInt($(this).位置()。左)},300);});};/script