jQuery简单实现仿京东分类导航层效果


Posted in Javascript onJune 07, 2016

本文实例讲述了jQuery简单实现仿京东分类导航层效果。分享给大家供大家参考,具体如下:

<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var alink01 = $(".item > ul");
    alink01.hover(function () {
      //alert div
      var divId = $(this).find("div").attr("id");
      var div = $("#" + divId); //要浮动在这个元素旁边的层
      div.css("position", "absolute"); //让这个层可以绝对定位
      var self = $(this); //当前对象
      div.css("display", "block");
      var p = self.position(); //获取这个元素的left和top
      var x = p.left + self.width(); //获取这个浮动层的left
      div.css("left", x + 45); //20140916修改
      div.css("top", p.top);
      div.show();
      //mouseenter
      $(this).removeClass("unfocus").addClass("focus");
    },
    function () {
      var divId = $(this).find("div").attr("id");
      var div = $("#" + divId); //要浮动在这个元素旁边的层
      div.css("display", "none");
      //mouseleave
      $(this).removeClass("focus").addClass("unfocus");
    });
  });
</script>
<div class="leftbody">
  <div class="item">
  <span>全部分类</span>
  <ul class="focus">
    <li ><strong>php</strong> <br />
    php基本语法 php实例
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>java</strong> <br />
    java语法 java面向对象
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>Python</strong> <br />
    Python语法 Python图形处理
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>javascript</strong> <br />
    javascript幻灯片 javascript网页特效
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>C#</strong> <br />
    C#桌面应用程序 C#网络程序
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>VC++</strong> <br />
    VC++系统程序开发 VC++网络程序
    </li>
  </ul>
  <ul class="unfocus">
    <li ><strong>Delphi</strong> <br />
    Delphi桌面程序 Delphi游戏开发
    </li>
  </ul>
  </div>
</div>

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

Javascript 相关文章推荐
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现商品活动倒计时
Oct 16 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
webpack5 联邦模块介绍详解
Jul 08 Javascript
vue 数字翻牌器动态加载数据
Apr 20 Vue.js
javascript之Array 数组对象详解
Jun 07 #Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 #Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 #Javascript
javascript基础知识
Jun 07 #Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 #Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 #Javascript
javascript如何定义对象数组
Jun 07 #Javascript
You might like
一个用php3编写的简单计数器
2006/10/09 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
ThinkPHP5+UEditor图片上传到阿里云对象存储OSS功能示例
2019/08/05 PHP
php+jQuery ajax实现的实时刷新显示数据功能示例
2019/09/12 PHP
jquery 批量上传图片实现代码
2010/01/28 Javascript
javascript获取元素偏移量的方法有哪些
2014/06/24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
了解VUE的render函数的使用
2017/06/08 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python字符转换
2008/09/06 Python
Python函数学习笔记
2008/10/07 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
python实现根据指定字符截取对应的行的内容方法
2018/10/23 Python
20行python代码实现人脸识别
2019/05/05 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
一款纯css3实现简单的checkbox复选框和radio单选框
2014/11/05 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
我的理想演讲稿
2014/04/30 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
大学生党员暑假实践(活动总结)
2019/08/21 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript