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 相关文章推荐
jQuery easyui datagrid动态查询数据实例讲解
Feb 26 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
javascript常用的设计模式
Feb 09 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
使用express+multer实现node中的图片上传功能
Feb 02 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
Nov 05 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
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 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
Script的加载方法小结
2011/01/12 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
Jquery为a标签的href赋值实现代码
2013/05/03 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
layui实现文件或图片上传记录
2018/08/28 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
python实现猜单词小游戏
2020/05/22 Python
Python数据持久化shelve模块用法分析
2018/06/29 Python
分析python请求数据
2018/08/19 Python
Django 拆分model和view的实现方法
2019/08/16 Python
Python倒排索引之查找包含某主题或单词的文件
2019/11/13 Python
python django中8000端口被占用的解决
2019/12/17 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python获取linux系统信息的三种方法
2020/10/14 Python
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
销售行业个人求职自荐信
2013/09/25 职场文书
迟到检讨书1000字
2014/01/15 职场文书
药品采购员岗位职责
2014/02/08 职场文书
高中军训感言400字
2014/02/24 职场文书
学习教师法的心得体会
2014/09/03 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
办公室文员岗位职责
2015/02/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫