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控制frame,iframe的src属性代码
Dec 31 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
Nuxt.js之自动路由原理的实现方法
Nov 21 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
vue中使用vue-pdf的方法详解
Sep 05 Javascript
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
十天学会php之第九天
2006/10/09 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
js实现转动骰子模型
2019/10/24 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
vue实现选中效果
2020/10/07 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
selenium+python环境配置教程详解
2019/05/28 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
制药工程专业毕业生推荐信
2013/12/24 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
高三励志标语
2014/06/05 职场文书
财务负责人任命书
2014/06/06 职场文书
大学副班长竞选稿
2015/11/21 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电