l'arrière-plan jquery suit le glissement de la souris navigation

l'arrière-plan jquery suit le glissement de la souris navigation_jquery

WBOY

Libérer： 2016-05-16 15:30:48

original

1213 Les gens l'ont consulté

L'exemple de cet article décrit le code d'effets spéciaux de navigation verticale dans le menu jQuery qui prend en charge le glissement vers le haut et vers le bas des images d'arrière-plan. Je le partage avec vous pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant

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

Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation jquery.