jQuery implements adding service effect code that imitates Baidu homepage sliding and telescopic expansion

jQuery implements adding service effect code that imitates Baidu homepage sliding and telescopic expansion_javascript skills

WBOY

Release： 2016-05-16 15:39:58

Original

1073 people have browsed it

The example in this article describes the jQuery implementation of adding service effect code that imitates Baidu homepage sliding and telescopic expansion. Share it with everyone for your reference. The details are as follows:

This is an added service effect that imitates the jQuery sliding expansion of Baidu homepage. It is actually a telescopic menu, but this menu is a bit special. It only stretches out from one end to the other. The telescopic effect of the menu is smooth and beautifully designed. .

The screenshot of the running effect is as follows:

The online demo address is as follows:

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

The specific code is as follows:

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

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.