jQuery implémente le code du menu coulissant avec retard effect

jQuery implémente le code du menu coulissant avec retard effect_jquery

WBOY

Libérer： 2016-05-16 15:40:49

original

1254 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jQuery du code de menu coulissant avec effet de retard. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu coulissant basé sur jQuery. Déplacez la souris sur un élément de menu et l'arrière-plan du menu peut glisser. Il a un effet de glissement fluide et un effet de navigation éblouissant. Par rapport aux menus sans animation, ce menu. est vraiment plutôt bien.

Jetons un coup d'œil aux captures d'écran de l'effet de course :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery实用炫动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.nav{width:960px;text-align:center;background:#06F;margin:0 auto;position:relative;}
.nav a{width:104px;height:41px;line-height:41px;display:inline-block;margin-right:30px;position:relative;z-index:11111;color:#FFF;}
.nav_bj{background:#F00;width:104px;height:41px;position:absolute;top:0;z-index:111;left:210px;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 var xxx,re;
 $(".nav a").mouseover(function(){
  xxx=$(this).position().left;
  $(".nav_bj").animate({left:xxx})
  clearTimeout(re);
  }).mouseout(function(){
   clearTimeout(re);
   re=setTimeout(function(){
    $(".nav_bj").animate({left:210})
   },500);
  })
 })
</script>
</head>
<body>
<div class="nav">
<a href="#">首页</a>
<a href="#">脚本之家</a>
<a href="#">脚本下载</a>
<a href="#">网页特效</a>
<div class="nav_bj"></div>
</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.