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

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' titlewww.jb51.net jquery滑动导航/title style * { margin : 0；padd : 0；盒子尺寸：边框盒子；-moz-box-siz :边框盒；}车身{ font: 16px/20px '微软雅黑，微软雅黑；color : # AFBBBB } ul { list-style-type : none；} ul li {左侧浮动：} a { text-decoration : nonecolor: # AFBBBB} a :悬停{ color : # ffffff光标：指针；} .clearfix:before。在{ content : }之前清除fix :clear:两者；显示器：表；高度： 0;变焦： 1；飞越：隐藏；} .nav { width :519 pxmargin : 0 auto }。nav ul { background : gray height : 35px线高： 35px相对位置：padding: 0 5px }。导航相对位置：padding: 0 25px }。导航相对位置：z指数： 100；/*将a元素的z指数设置比里大，这样盘旋效果才不会无效*/} .nav ul Li :最后一个孩子{ width : 98px高度： 90%;绝对位置：z指数： 50;left : 5px bottom : 0；top : 0；margin:汽车背景： rgba(152，206，170，0.5)；边界半径： 5px}/style/head dydiv class=' nav ' ul class=' clear fix ' lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '幼儿园/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel='外部nofollow ' rel='外部nofollow '小学/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '初中/a/Li lia href=' JavaScript : void(0)' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '高中/a/Li lia href=' JavaScript : void(0)' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '大学/a/Li lia href=' JavaScript : void(0)' rel=' external no follow ' rel=' external no follow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '社会/a/Li Li class=' Huadong ' id=' huaBlock '/Li/ul/div script src=' http :3358 cdn。 bootcss。com/jquery/2。1 .0/jquery。js '/script script $(function(){ $(' ul Li : not(: last)')).悬停(function(){ $('#huaBlock ')).stop()；//停止正在运行的动画var curlividth=$(this).外套宽度(),卷发夹=$(这个)。偏移量()。左-$(这个)。父项()。偏移量()。向左；//当前里的偏移量减去当前保险商实验所的偏移量就是里距离保险商实验所的距离//alert('卷曲： '卷曲);$('#huaBlock ').动画({ ' width ' :curliWidth，' left ' :curleft }，500)；}，function(){ $('#huaBlock ').stop()；$('#huaBlock ').动画({'width':98，' left': 5}，200)；});});/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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