jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

前端技术 2023/09/09 JavaScript

本文实例讲述了jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码。分享给大家供大家参考。具体如下：

这是一款仿百度首页jQuery滑动伸缩展开的添加服务效果，其实是一款伸缩菜单，只不过这个菜单有点特别，只从一头向另一头伸展出去，菜单的伸缩效果平滑，设计精美。

运行效果截图如下：

在线演示地址如下：

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

具体代码如下：

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

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/24424

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案