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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
JQuery 浮动导航栏实现代码
Aug 27 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
jquery.validate使用攻略 第三部
Jul 01 Javascript
js调试系列 控制台命令行API使用方法
Jun 18 Javascript
js基础知识(公有方法、私有方法、特权方法)
Nov 06 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
利用vue.js插入dom节点的方法
Mar 15 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
Vue如何获取数据列表展示
Dec 11 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
jquery为页面增加快捷键示例
2014/01/31 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
js实现数字每三位加逗号的方法
2015/02/05 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
windows实现npm和cnpm安装步骤
2019/10/24 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python实现博客文章爬虫示例
2014/02/26 Python
Python实现子类调用父类的方法
2014/11/10 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
简单谈谈python中的多进程
2016/11/06 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
Python实现的简单线性回归算法实例分析
2018/12/26 Python
Python实现上下文管理器的方法
2020/08/07 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
四风存在的原因分析
2014/02/11 职场文书
试用期自我鉴定范文
2014/03/20 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
个人委托书格式
2014/04/04 职场文书
质量保证书范本
2014/04/29 职场文书
土木工程求职信
2014/05/29 职场文书
2015年国税春训心得体会
2015/03/09 职场文书
《称赞》教学反思
2016/02/17 职场文书
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android