时间:2021-05-26
本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下
样式代码
<style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: #666666; } .sign{ width: 40px; height: 40px; margin-top:280%; } .sign_top{ margin-top: 10px; } .sign_add_height{ height: 140px; background: #888888; color: #ffffff; font-size: 13px; list-style: none; font-weight: bold; } .sign_add_height ul{ margin-top: 6px; cursor: pointer; } .sign_add_height ul li{ list-style-type: none; width: 20px; height: 20px; margin-top: 5px; } .buy{ width: 20px; height: 20px; border-radius: 10px 10px; background:#666; } .sign_QR{ margin-top: 200%; position: absolute; bottom: 50px; position: fixed; background: #666666; } .sign_end{ position: absolute; bottom: 0px; position: fixed; background: #666666; } .sign img{ width: 22px; height: 22px; margin-top: 10px; cursor: pointer; } .run_sign{ width: 100px; height: 40px; margin-left: -100px; margin-top: -35px; background: #666666; color: #1afa29; font-size: 13px; line-height: 40px; cursor: pointer; } .run_QR{ height: 250px; width: 200px; margin-left: -200px; margin-top: -245px; } .sign_float{ position: fixed; } </style>jQuery代码
这里把图片的名称换成数字的,每一个图标都有两个图片, 一个白色和一个绿色的,当鼠标移动到其中一个图标处时,改变其图片使其变色,因为一共有八个图标,所以总共有16张图片。因此图片名改变为当前图片名称数字+8。
这里用的动态是slideDown与slideUp。需要注意的是要设置索引来寻找但前对象的位置(因为是在for循环里有了索引才能找到当前对象的图片的数字名称)。
<script> $(function(){ $('.run_sign').css('display','none'); $(".run_QR img").attr("src","img/17.png"); for(var i=0;i<8;i++){ if(i==6){ $('.sign').eq(i).hover(function(){ $(this).css('background','#ea68a2').find('.img_1').attr("src","img/15.png"); $(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){ $(this).css('background','#666666').find('.img_1').attr("src","img/7.png"); $(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})} else if(i==5){ $('.sign').eq(i).hover(function(){ $(this).css('background','#ea68a2').find('img').attr("src","img/14.png");},function(){ $(this).css('background','#888888').find('img').attr("src","img/6.png");})} else{ $('.sign').eq(i).hover(function(){ var b=$(this).index(); $(this).css('background','#ea68a2').find('img').attr("src","img/"+(b+9)+".png"); $(this).find('.run_sign').css('visibility','visible').stop().slideDown(200);},function(){ var b=$(this).index(); $(this).css('background','#666666').find('img').attr("src","img/"+(b+1)+".png"); $(this).find('.run_sign').css('visibility','visible').stop().slideUp(200);})}} });</script>布局代码
<body> <div class="right_ng"> <div class="sign"> <center> <img src="img/1.png" /> </center> <div class="run_sign"> <center> <span><b>我的订单</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/2.png" /> </center> <div class="run_sign"> <center> <span><b>我的收藏</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/3.png" /> </center> <div class="run_sign"> <center> <span><b>我的优惠券</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/4.png" /> </center> <div class="run_sign"> <center> <span><b>我的足迹</b></span> </center> </div> </div> <div class="sign sign_top"> <center> <img src="img/5.png" /> </center> <div class="run_sign"> <center> <span><b>我的JImu</b></span> </center> </div> </div> <div class="sign sign_top sign_add_height"> <center> <img src="img/6.png" /> <ul> <li>购</li> <li>物</li> <li>车</li> <li class="buy">0</li> </ul> </center> </div> <div class="sign sign_top sign_QR"> <center> <img class="img_1" src="img/7.png" /> </center> <div class="run_sign run_QR"> <center> <img class="img_2" src="img/17.png" style="width: 160px;height: 170px;"> <br />微信扫码享优惠 </center> </div> </div> <div class="sign sign_top sign_end"> <center> <img src="img/8.png" /> </center> <div class="run_sign"> <center> <span><b>加关注</b></span> </center> </div> </div> </div></body>效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现气球弹出框式的侧边导航菜单效果。分享给大家供大家参考。具体如下:这是一款基于jQuery实现的气球弹出框式的侧边导航菜单,预览效果
本文实例讲述了jquery实现的仿天猫侧导航tab切换效果。分享给大家供大家参考。具体如下:这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若
本文实例讲述了jQuery实现仿美橙互联两级导航菜单效果。分享给大家供大家参考。具体如下:这是一款基于jQuery实现的仿美橙互联两级导航菜单,效果不错吧,更像
jquery实现导航固定顶部的效果,仿蘑菇街的,感觉还不错,需要的朋友可以参考下?123456789101112131415161718192021222324
本文实例讲述了DIV+CSS实现仿京东商城导航条效果。分享给大家供大家参考。具体如下:这里演示了DIV+CSS实现仿京东商城导航条功能代码,鼠标滑过导航条选项即