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代码
Dec 01 Javascript
jquery maxlength使用说明
Sep 09 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
require.js的用法详解
Oct 20 Javascript
javascript实现的猜数小游戏完整实例代码
May 10 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
Three.js实现浏览器变动时进行自适应的方法
Sep 26 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
js实现查询商品案例
Jul 22 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
Discuz! Passport 通行证整合
2008/03/27 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
php 攻击方法之谈php+mysql注射语句构造
2009/10/30 PHP
PHP sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php表单敏感字符过滤类
2014/12/08 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
SpringBoot在yml配置文件中配置druid的操作
2020/11/16 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
利用Python找出序列中出现最多的元素示例代码
2017/12/08 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
新闻网站实习自我鉴定
2013/09/25 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
考察现实表现材料
2014/05/19 职场文书
工作目标责任书
2014/07/23 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
法律意见书范文
2015/06/04 职场文书
卖车协议书范文
2016/03/23 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL
python 多态 协议 鸭子类型详解
2021/11/27 Python
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js