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.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
utilisation de l'intervalle défini
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
