jQuery implémente l'ajout d'un code d'effet de service qui imite les compétences de glissement et d'expansion télescopique_javascript de la page d'accueil de Baidu-js tutoriel-php.cn

jQuery implémente l'ajout d'un code d'effet de service qui imite les compétences de glissement et d'expansion télescopique_javascript de la page d'accueil de Baidu

WBOY

Libérer： 2016-05-16 15:39:58

original

1038 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jQuery de l'ajout de code d'effet de service qui imite le glissement et l'expansion télescopique de la page d'accueil de Baidu. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un effet de service supplémentaire qui imite l'expansion coulissante jQuery de la page d'accueil de Baidu. Il s'agit en fait d'un menu télescopique, mais ce menu est un peu spécial. Il ne s'étend que d'un bout à l'autre. le menu est fluide et magnifiquement conçu.

La capture d'écran de l'effet en cours d'exécution est la suivante :

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

http://demo.jb51.net/js/2015/js-f-baidu-index-show-serv-style-codes/

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>添加服务</title>
<style>
*{padding:0;margin:0;font:12px/26px "微软雅黑";}
a,a:hover{text-decoration:none;color:#ccc;}
dl{margin:0 auto;border:1px solid #fff;float:left;position:absolute;left:50%;color:#ccc;margin:100px 0 100px -45px ;overflow:hidden;}
dl.open{margin-left:-200px;}
dl.open dt{background:url(images/s_add_all_3f6f39e5.png) 0 0 no-repeat;}
dl dt{width:94px;height:30px;line-height:30px;text-align:center;cursor:pointer;position:relative;z-index:10;float:left; background:#fff;}
dl dd{display:none;height:28px;float:left;}
dl dd a{float:left;display:block;height:28px;line-height:28px;padding:0 15px 0 35px;position:relative;left:-300px;border-top:1px solid #E5E5E5;border-bottom:1px solid #E5E5E5;background:url(images/s_add_all_3f6f39e5.png) no-repeat;}
dl dd .nav{background-position:13px -35px;}
dl dd .hot{background-position:13px -61px;}
dl dd .app{background-position:13px -87px;}
dl dd .fresh{background-position:13px -113px;border-right:1px solid #E5E5E5;}
dl dd .nav:hover{background-position:-104px -35px;}
dl dd .hot:hover{background-position:-104px -61px;}
dl dd .app:hover{background-position:-104px -87px;}
dl dd .fresh:hover{background-position:-104px -113px;}
</style>
</head>
<body>
<dl>
<dt id="add">+添加服务</dt>
<dd id="con"><a class="nav" href="#">导航</a><a class="hot" href="#">实时热点</a><a class="app" href="#">应用</a><a class="fresh" href="#">新鲜事</a></dd>
</dl>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
window.onload = function(){ 
 var Close = function(event){     
  $('dd a').animate({left:-400});
  setTimeout('$("dl").css("margin-left",-45);$("dl").removeClass("open")',300)    
 };
 var Open = function(event){
  $("dd").show();
  var dl_W=$("dl").width();
  $("dl").addClass("open").css("margin-left",-dl_W/2);
   $('dd a').animate({left: 0},300);
   Stop(event);
 };
 var Stop = function(event){
  e = event || window.event;
  if(e.stopPropagation){
   e.stopPropagation();
  }else {
   e.cancelBubble = true;
  }
 };
 $(document).bind('click', Close);
 $('dt').bind('click',Open);
 $('dd').bind('click',Stop);
};
</script>
</html>

Copier après la connexion

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