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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
学习Node.js模块机制
Oct 17 Javascript
基于React实现表单数据的添加和删除详解
Mar 14 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
Apr 25 jQuery
javascript编写简易计算器
May 06 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 Javascript
使用react-virtualized实现图片动态高度长列表的问题
May 28 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
PHP4和PHP5共存于一系统
2006/11/17 PHP
swfupload 多文件上传实现代码
2008/08/27 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
基于php中使用excel的简单介绍
2013/08/02 PHP
PHP面向对象教程之自定义类
2014/06/10 PHP
9个比较实用的php代码片段
2016/03/15 PHP
Laravel日志用法详解
2016/10/09 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
原生js实现弹出层效果
2017/01/20 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
移动端如何用下拉刷新的方式实现上拉加载
2018/12/10 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JavaScript计算正方形面积
2019/11/26 Javascript
python开发之字符串string操作方法实例详解
2015/11/12 Python
python搭建微信公众平台
2016/02/09 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python3实现的简单工资管理系统示例
2019/03/12 Python
Python简单I/O操作示例
2019/03/18 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
女孩每月服装订阅盒:kidpik
2019/04/17 全球购物
一份软件工程师的面试试题
2016/02/01 面试题
小学雷锋月活动总结
2014/07/03 职场文书
网上祭英烈活动总结
2015/02/04 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
五年级作文之想象作文
2019/10/30 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python
Java Spring读取和存储详细操作
2022/08/05 Java/Android
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技