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

2024-11-30 14:19:24

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

基于jquery的大众点评，分类导航实现代码

简单轻盈快速高效! html结构: 复制代码代码如下: <div id="menu"> <ul id="G_chan-panel" class="pop-panel pp_channels Fix" style="position: absolute; visibility: visible; z-index: 1001; top: 175px; left: 189px; ">
jQuery模仿京东/天猫商品左侧分类导航菜单效果

现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事件,用得比较多的就是mouseover()和mouseout(),或者是他们两个的整合hover();所以之前我也是用的这种方法,但是一直调整都调整不到想要的效果!后来灵光一现,想着使用一下mouseenter()和mouseleave();结果分分钟想要的效果就出来了! 我的布局大致是这样的: <
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果

在网站建设中,特别是做商城和产品网站,通常会用到导航弹出菜单,像是jquery写的仿京东导航菜单,一个经典的左侧多级导航菜单,学会了可以任意改变布局.京东菜单已经有不少JS前端爱好者仿写过,今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单,精简版代码先看下jquery仿京东导航效果: 前端html代码如下: 复制代码代码如下: <ul> <li><a href="#">baidu</a></li> <div
jQuery简单实现仿京东分类导航层效果

本文实例讲述了jQuery简单实现仿京东分类导航层效果.分享给大家供大家参考,具体如下: <script src="jquery-1.11.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var alink01 = $(".item > ul"); al
jQuery简单实现仿京东商城的左侧菜单效果代码

本文实例讲述了jQuery简单实现仿京东商城的左侧菜单效果代码.分享给大家供大家参考.具体如下: 这是一款挺漂亮的左侧菜单效果,基于jQuery插件,但是还没有真正的完善,有些闪动,也希望高人指点修正.仿京东商城风格的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-jd-shop-left-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.
jquery仿京东侧边栏导航效果

本文实例为大家分享了jquery仿京东侧边栏导航的具体代码,供大家参考,具体内容如下样式代码 <style> *{ padding: 0; margin: 0; border: 0; } body{ height: 2000px; } .right_ng{ width: 40px; height: 100%; position: absolute; position: fixed; right: 0px; background: #666666; } .sign{ width: 40px;
vue 和vue-touch 实现移动端左右导航效果（仿京东移动站导航）

先给大家展示下效果图,感觉还不错请参考实现代码: 使用技术:vue2.0 webpack vue-touch 一些简单的javascript; (注意:vue-touch 使用的是2.0.0版本需要与vue2.0.0兼容) vue-touch(地址:https://github.com/vuejs/vue-touch 注意是next 分支) 左侧导航可滑动(右侧视图窗因为和左逻辑一样就没写) var VueTouch = require('vue-touch') Lib.Vue.use(Vu
jquery实现的仿天猫侧导航tab切换效果

本文实例讲述了jquery实现的仿天猫侧导航tab切换效果.分享给大家供大家参考.具体如下: 这里演示jquery实现仿天猫侧导航tab切换效果,引入外部JS,若初次运行有错误请刷新一页面即可.本菜单是仿天猫商城的菜单,大块的div菜单,支持超多的产品分类,大网站风格,大气实用的多分类网页菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ftmail-nav-tab-cha-codes/ 具体代码如下: <!DOCTYPE h
Android仿京东分类模块左侧分类条目效果

本文实例为大家分享了Android仿京东左侧分类条目效果的具体代码,供大家参考,具体内容如下 import android.app.Activity; import android.os.Bundle; import android.view.View; import android.widget.LinearLayout; import android.widget.ScrollView; import android.widget.TextView; import com.frame.R;
Android使用Scroll+Fragment仿京东分类效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下实现思路:首先说下布局,整个是一个横向的线性布局,左边是一个ScrollView,右边是一个FrameLayout,在代码中动态向ScrollView中添加TextView,然后根据TextView的点击事件使用Fragment替换FrameLayout 首先看下布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andr
Android仿京东分类效果

本文实例为大家分享了Android仿京东分类效果展示的具体代码,供大家参考,具体内容如下 1.写一个fragment import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView;
vue基于better-scroll仿京东分类列表

本文实例为大家分享了vue基于better-scroll仿京东分类列表的具体代码,供大家参考,具体内容如下效果图和目录结构 1.main.js(需要安装router) import Vue from 'vue' import App from './App.vue' import router from './router' import '../src/assets/js/mock' import axios from 'axios' axios.defaults.baseURL='http

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

相关推荐

随机推荐