recherche

Maison  >  Article  >  interface Web  >  jQuery implémente le code du menu coulissant avec retard effect_jquery

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

WBOY
WBOYoriginal
2016-05-16 15:40:491293parcourir

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>

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Plusieurs annonces illustrées affichent alternativement le code d'effet implémenté dans les compétences JavaScript_javascriptArticle suivant：Plusieurs annonces illustrées affichent alternativement le code d'effet implémenté dans les compétences JavaScript_javascript

Articles Liés

Voir plus