手机版

jquery仿京东侧边栏导航效果

时间:2021-09-05 来源:互联网 编辑:宝哥软件园 浏览:

本文实例为大家分享了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效果图:

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

版权声明:jquery仿京东侧边栏导航效果是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。