jquery背景跟随鼠标滑动导航


Posted in Javascript onNovember 20, 2015

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下:

运行效果截图如下:

jquery背景跟随鼠标滑动导航

具体代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="gb2312">
<title>左边跟随鼠标滑动导航</title>
<meta name="keywords" content="滑动导航" />
<meta name="description" content="左边跟随鼠标滑动导航" />
<style>
/*---------重置---------*/
html {
 font-size: 100%;
 -webkit-text-size-adjust:100%;
 -ms-text-size-adjust:100%;
*overflow:auto;
 _overflow-x:hidden;
}
body {
 margin:0;
}
p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 {
 margin-top:0;
 margin-bottom:0;
}
dl, dd {
 margin-left:0;
}
ul, ol {
 padding-left:0;
*margin-left:0;
 list-style-type: none;
}
ul li {
*zoom:1;
*vertical-align:bottom;
}
em, var, cite, i {
 font-style:normal;
}
small {
 font-size:inherit;
}
s, a {
 text-decoration:none;
}
:focus {
 outline:none;
}
blockquote, q {
 quotes:none;
 margin:0;
}
table {
 border-collapse:collapse;
 border-spacing:0;
 empty-cells:show;/*table-layout:fixed;*/
}
img, iframe {
 border:none;
}
img {
 vertical-align: top;
 -ms-interpolation-mode: bicubic;/*ie7防止图片缩小失真的*/
}
/*---------竖向菜单(非必需)---------*/
.bl-vernav li {
 border-bottom:1px solid #ddd;
 margin-bottom:-1px;
 padding-top:1px;
}
.bl-vernav a {
 display:block;
 height:20px;
 line-height:20px;
 padding:10px 16px;
}
.bl-vernav a:hover {
 background:#F8F8F8;
 text-decoration:none;
}
/*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/

.bl-vernav-ord {
 border:1px solid #ddd;
}
.vernav-level li li {
 border-left:none;
 border-right:none;
}
.vernav-level li li a {
 padding-left:40px;
}
.vernav-level .cur .one {
 background:#F8F8F8;
}
.vernav-level li .cur a {
 background:#F8F8F8;
}
/*diy*/
 .bl-vernav-wrap {
 position:relative;
}
.bl-vernav-wrap .sideLine {
 position:absolute;
 left:-6px;
 top:0;
 z-index:1;
 line-height:0;
 font-size:0;
 border-left:#FF5F3E solid 7px;
 background-color:#F8F8F8;
}
.bl-vernav {
 position:relative;
 z-index:2;
}
.bl-vernav a:hover {
 background-color:transparent;
}
.demobox {
 width:460px;
 font-size:14px;
 color:#333;
 font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;
}
a {
 color:#333;
 text-decoration:none;
}
</style>
</head>

<body style="padding:50px;">
<div class="demobox">
 <h1 class="h3">左边条纹跟随鼠标滑动导航</h1>
 <br/>
 <div class="bl-vernav-wrap">
 <div class="sideLine"></div>
 <ul class="bl-vernav vernav-level">
  <li><a href="#" class="one">导航菜单</a></li>
  <li class="cur"> <a href="#" class="one">神探夏洛克</a>
  <ul>
   <li><a href="#">海贼王</a></li>
   <li><a href="#">海贼王</a></li>
   <li><a href="#">海贼王</a></li>
  </ul>
  </li>
  <li><a href="#" class="one">神探夏洛克</a></li>
  <li><a href="#" class="one">神探夏洛克</a></li>
  <li><a href="#" class="one">神探夏洛克</a></li>
 </ul>
 </div>
</div>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 
<script>
$(function(){
 var verNav = $(".bl-vernav"), //第一层ul.
 line = verNav.siblings(".sideLine"), //左边条纹线
 verNavFirst = verNav.children("li:first"), //第一层ul中第一个li
 curY = verNav.children("li.cur").position().top;
 
 line.height(verNavFirst.outerHeight()-1).width(verNavFirst.outerWidth());//设置辅助线初始化高度和宽度,也可以直接用css设置好,这里就不用js计算了 

 verNav.find("li").mouseenter(function(){
 var thisY = $(this).position().top;
 line.stop(true,true).animate({top:thisY},200);
 return false
 })
 .end()
 .mouseleave(function(){
 line.stop(true,true).animate({top:curY},300) 
 }).trigger("mouseleave");
});
</script>
</body>
</html>

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

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
node.js中的fs.mkdir方法使用说明
Dec 17 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
微信小程序入门教程
Nov 18 Javascript
面试常见的js算法题
Mar 23 Javascript
jquery实现图片放大点击切换
Jun 06 jQuery
微信小程序 wepy框架与iview-weapp的用法详解
Apr 10 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JavaScript获取浏览器信息的方法
Nov 20 #Javascript
JavaScript性能优化之小知识总结
Nov 20 #Javascript
Bootstrap每天必学之基础排版
Nov 20 #Javascript
详解JavaScript的回调函数
Nov 20 #Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 #Javascript
jquery动态增加删减表格行特效
Nov 20 #Javascript
跟我学习javascript的异步脚本加载
Nov 20 #Javascript
You might like
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
Laravel 5框架学习之Laravel入门和新建项目
2015/04/07 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery Validate让普通按钮触发表单验证的方法
2016/12/15 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
2018/09/20 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
elementUI select组件默认选中效果实现的方法
2019/03/25 Javascript
JS实现返回上一页并刷新页面的方法分析
2019/07/16 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
彻底理解Python list切片原理
2017/10/27 Python
python绘制双柱形图代码实例
2017/12/14 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
您附近的水疗和健康场所:Spafinder(美国)
2019/07/05 全球购物
2014年大学生四年规划书范文
2014/04/03 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
莫言诺贝尔获奖感言(全文)
2015/07/31 职场文书
2016年春节问候语
2015/11/11 职场文书