jquery仿京东侧边栏导航效果

本文实例为大家分享了jquery仿京东侧边栏导航的具体代码，供大家参考，具体内容如下

样式代码

样式* { padd : 0；保证金： 0；边框： 0；}车身{ height: 2000px}。right _ ng { width: 40px高度： 100%;绝对位置：位置：固定；右： 0px背景技术： # 666666;} .符号{ width: 40px高度： 40px保证金-前：280%；} .sign _ top { margin-top : 10px；} .sign _ add _ height { height : 140 px；背景技术： # 88888;color : # fffffont-size : 13px；列表样式：无；字体粗细：粗体；} .sign _ add _ height ul { margin-top : 6px；光标：指针；} .符号_添加_高度ul Li {列表样式-类型：无；宽度： 20px高度： 20像素边距-top : 5px；} .购买{ width : 20px heart : 20pxborder-radius : 10px 10px；背景技术： # 666;} .sign _ QR {保证金-顶部： 200%；绝对位置：bottom: 50px位置：固定；背景技术： # 666666;} .符号_end{ position:绝对值；bottom: 0px位置：固定；背景技术： # 666666;} .符号img { width : 22px h8 : 22pxmargin-top : 10px；光标：指针；} .run _ sign { width: 100px高度： 40px左边距：-100px；页边距-top :-35px；背景技术： # 666666;color : # 1 FAA 29 font-size : 13px；线高： 40px光标：指针；} .run _ QR { height: 250px宽度： 200像素；边距-左侧：-200像素；页边距-top :-245 px；} .符号_float{ position:固定；} /stylejQuery代码

这里把图片的名称换成数字的，每一个图标都有两个图片，一个白色和一个绿色的，当鼠标移动到其中一个图标处时，改变其图片使其变色，因为一共有八个图标，所以总共有16张图片。因此图片名改变为当前图片名称数字8。

这里用的动态是向下滑动与向上滑动。需要注意的是要设置索引来寻找但前对象的位置（因为是在为循环里有了索引才能找到当前对象的图片的数字名称)。

script $(function(){ $(').run _ sign’).css('display '，' none ')；$('.run _ QR img’).attr('src '，' img/17。png ')；for(var I=0；i8；i ){ if(i==6){ $(' .符号')。方程式(I ).悬停(function(){ $(this)).css(“”背景，' #ea68a2 ').查找('。img _ 1 ').attr('src '，' img/15。png ')；$(这个)。查找('。run _ sign’).css(“”可见','可见')。停止()。向下滑动(200);}，function(){ $(this).css(“”背景',' #666666 ')。查找('。img _ 1 ').attr('src '，' img/7。png ')；$(这个)。查找('。run _ sign’).css(“”可见','可见')。停止()。向上滑动(200);})} else if(i==5){ $(' .符号')。方程式(I ).悬停(function(){ $(this)).css(“”背景，' #ea68a2 ').查找(' img ').attr('src '，' img/14。png ')；}，function(){ $(this).css(“”背景',' #888888 ')。查找(' img ').attr('src '，' img/6。png ')；})} else{ $(' .符号')。方程式(I ).悬停(function(){ var b=$(this)).index()；$(这个)。css(“”背景，' #ea68a2 ').查找(' img ').attr('src '，' img/' (b 9)" .png ')；$(这个)。查找('。run _ sign’).css(“”可见','可见')。停止()。向下滑动(200);}，function(){ var b=$(this).index()；$(这个)。css(“”背景',' #666666 ')。查找(' img ').attr('src '，' img/' (b 1)" .png ')；$(这个)。查找('。run _ sign’).css(“”可见','可见')。停止()。向上滑动(200);})}} });/script布局代码

body div class=' right _ ng ' div class=' sign ' center img src=' http : img/1。png '/center div class=' run _ sign '中心跨度我的订单/span/center/div/div class=' sign sign _ top ' center img src=' http : img/2。png '/center div class=' run _ sign '中心跨度我的收藏/span/center/div/div class=' sign sign _ top ' center img src=' http : img/3。png '/center div class=' run _ sign '中心跨度我的优惠券/span/center/div/div class=' sign sign _ top ' center img src=' http : img/4。png '/center div class=' run _ sign '中心跨度我的足迹/span/center/div/div class=' sign sign _ top ' center img src=' http : img/5。png '//center div class='run_sign '中心跨度我的吉姆/span/center/div/div class=' sign sign _ top sign _ add _ height ' center img src=' http : img/6。png '/ul Li购/li li物/li li车/Li Li class=' buy ' 0/Li/ul/center/div class=' sign sign _ top sign _ QR ' center img class=' img _ 1 ' src=' http : img/7。png '/center div class=' run _ sign run _ QR ' center img class=' img _ 2 ' src=' http : img/17。png ' style=' width 3360 160 px'高度： 170像素；br /微信扫码享优惠/center/div/div class=' sign sign _ top sign _ end ' center img src=' http : img/8。png '/center div class=' run _ sign '中心跨度加关注/span/center/div/div/body效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。