search

Home  >  Article  >  Web Front-end  >  jquery background follows mouse sliding navigation_jquery

jquery background follows mouse sliding navigation_jquery

WBOY
WBOYOriginal
2016-05-16 15:30:481242browse

The example in this article describes the vertical jQuery menu navigation special effects code that supports the up and down sliding of background images. I share it with you for your reference. The details are as follows:
The screenshot of the running effect is as follows:

The specific code is as follows

<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>

I hope this article will be helpful to everyone learning jquery programming.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JQuery implements simple picture sliding switching effects_jqueryNext article：JQuery implements simple picture sliding switching effects_jquery

Related articles

See more