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加密解密7种方法总结分析
Oct 07 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js中运算符&amp;&amp; 和 || 的使用记录
Aug 21 Javascript
javascript实现动态改变层大小的方法
May 14 Javascript
jQuery validate插件submitHandler提交导致死循环解决方法
Jan 21 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
javascript加减乘除的简单实例
Jul 12 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
Mar 03 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
谈谈JavaScript令人迷惑的==与+
Aug 31 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
基于文本的搜索
2006/10/09 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
PHP如何使用Memcached
2016/04/05 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
js实现图片轮播效果
2015/12/19 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
如何利用JQuery实现从底部回到顶部的功能
2016/12/27 Javascript
JS实现的简单拖拽功能示例
2017/03/13 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Python translator使用实例
2008/09/06 Python
Python入门教程之if语句的用法
2015/05/14 Python
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
详解python持久化文件读写
2019/04/06 Python
python中dict()的高级用法实现
2019/11/13 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python Sphinx使用实例及问题解决
2020/01/17 Python
python super用法及原理详解
2020/01/20 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
Python如何读写二进制数组数据
2020/08/01 Python
python实现画图工具
2020/08/27 Python
课堂教学改革实施方案
2014/03/17 职场文书
大学生社会实践自我鉴定
2014/03/24 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
2016年元旦致辞
2015/08/01 职场文书
经典爱情感言
2015/08/03 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang