jquery仿京东侧边栏导航效果


Posted in Javascript onMarch 02, 2017

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

效果图:

jquery仿京东侧边栏导航效果

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

Javascript 相关文章推荐
javascript第一课
Feb 27 Javascript
javascript 模拟点击广告
Jan 02 Javascript
JQuery的Alert消息框插件使用介绍
Oct 09 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
js实现敏感词过滤算法及实现逻辑
Jul 24 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
详解vue 组件的实现原理
Nov 12 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 #Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 #Javascript
利用ES6语法重构React组件详解
Mar 02 #Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 #Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
You might like
用Flash图形化数据(二)
2006/10/09 PHP
转换中文日期的PHP程序
2006/10/09 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
Javascript模板技术
2007/04/27 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
前端性能优化及技巧
2016/05/06 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
python进阶教程之异常处理
2014/08/30 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python简单实现AES加密和解密
2019/03/28 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
数控加工专业毕业生自荐信
2013/09/27 职场文书
函授毕业生自我鉴定
2013/11/06 职场文书
应用心理学个人求职信范文
2013/12/11 职场文书
旅游网创业计划书
2014/01/31 职场文书
小区推广策划方案
2014/06/06 职场文书
2014年接待工作总结
2014/11/26 职场文书
副总经理岗位职责
2015/02/02 职场文书
2015年国培研修感言
2015/08/01 职场文书
聊聊pytorch测试的时候为何要加上model.eval()
2021/05/23 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis