Jquery实现京东右侧固定层
2017-09-13 15:51
3447 查看
页面代码如下
css代码如下
js代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>京东首页右侧固定层</title> <link href="css/nav.css" rel="stylesheet"> <script src="js/jquery-1.12.4.js"></script> <script src="js/js.js"></script> </head> <body> <nav id="nav"> <li><span></span><p>就东会员</p></li> <li><span></span><p>购物车</p></li> <li><span></span><p>我的关注</p></li> <li><span></span><p>我的足迹</p></li> <li><span></span><p>我的消息</p></li> <li><span></span><p>咨询JIMI</p></li> </nav> </body> </html>
css代码如下
*{margin: 0; padding:0; font-size: 12px;} ul,ol,li{list-style: none;} #nav{width: 100px; margin: 0 auto;} #nav li{height:36px;} #nav li span{ display: block; float: right; width: 35px; height: 35px; border-bottom-left-radius: 5px; border-top-left-radius: 5px; background: #7a6e6e url("../images/toolbars.png") no-repeat; } #nav li span:hover{ background-color: red;} #nav li:nth-of-type(1) span{background-position: 0px -15px;} #nav li:nth-of-type(2) span{background-position: 0px -57px;} #nav li:nth-of-type(3) span{background-position: 1px -106px;} #nav li:nth-of-type(4) span{background-position: 0px -156px;} #nav li:nth-of-type(5) span{background-position: 0px -200px;} #nav li:nth-of-type(6) span{background-position: 2px -265px;} #nav li p{ height: 35px; text-align: left; background: red; color: #ffffff; border-bottom-left-radius: 5px; border-top-left-radius: 5px; line-height: 35px; padding-left: 10px; display: none; }
js代码如下
$(document).ready(function () { var index=-1; $("#nav li>span").mouseover(function () { index=$("#nav li>span").index($(this)); $("#nav li:eq("+index+") span~p").show(); }).mouseout(function () { $("#nav li:eq("+index+") span~p").hide(); }); })
相关文章推荐
- js + jquery 实现无限加载页面的分页(类似京东手机版)
- jQuery实现拉动页面固定顶部显示且自动消失(火狐)
- Jquery实现相对浏览器位置固定、悬浮
- 基于JSON+JQuery实现的多条件筛选功能(类似京东和淘宝功能)
- jquery实现类似以前凡客诚品右侧图文切换结合效果
- jquery实现拖动到固定区域
- jquery固定表头不滚动让内容滚动的代码实现
- 表头固定(利用jquery实现原理介绍)
- 利用JQuery实现固定表头,兼容IE7/8 & FF
- css实现右侧固定宽度,左侧宽度自适应
- jQuery实现表头固定效果的实例代码
- jQuery实现右侧抽屉式在线客服功能
- jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
- 用jquery实现仿蘑菇街导航固定顶部的效果
- jquery实现的导航固定效果
- jQuery实现图片震动效果jquery博客右侧广告效果
- jQuery实现在鼠标滚动后导航栏保持固定
- jQuery实现冻结 固定 表格行和列 (未测试)
- 老生长谈:css实现右侧固定宽度,左侧宽度自适应
- jquery实现滚动条下拉DIV固定在头部不动