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动态添加样式(行内式/嵌入式/外链式等规则)
Jun 24 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
JQuery给网页更换皮肤的方法
May 30 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
vue实现图片上传功能
May 28 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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迭代与递归实现无限级分类
2017/08/28 PHP
PHP实现的折半查询算法示例
2017/10/09 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
2011/02/11 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python中基础的socket编程实战攻略
2016/06/01 Python
python妙用之编码的转换详解
2017/04/21 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
python实现最小二乘法线性拟合
2019/07/19 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
使用python客户端访问impala的操作方式
2020/03/28 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
高三家长寄语
2014/04/03 职场文书
洗手间标语
2014/06/23 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
JavaScript前端面试扁平数据转tree与tree数据扁平化
2022/06/14 Javascript