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 21 Javascript
封装好的js判断操作系统与浏览器代码分享
Jan 09 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
Electron 如何调用本地模块的方法
Feb 01 Javascript
微信小程序城市选择及搜索功能的方法
Mar 22 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
use jscript List Installed Software
2007/06/11 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
jQuery中val()方法用法实例
2014/12/25 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
2015/11/17 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
vue教程之toast弹框全局调用示例详解
2020/08/24 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
详解Django中的过滤器
2015/07/16 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Anaconda 离线安装 python 包的操作方法
2018/06/11 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
酒店办公室文员岗位职责
2013/12/18 职场文书
《长相思》听课反思
2014/04/10 职场文书
运动会方队口号
2014/06/07 职场文书
市场营销策划方案
2014/06/11 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
以权谋私检举信范文
2015/03/02 职场文书
让子弹飞观后感
2015/06/11 职场文书
七年级作文之下雨天
2019/12/23 职场文书
python实现自动化群控的步骤
2021/04/11 Python
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL