9159金沙游艺场-奥门金沙游艺场-[欢迎您]

9159金沙游艺场为您呈现最新的面貌!,目前注册送体验金,欢迎您将成为影视娱乐行业新的风向标,是亚洲的优质娱乐先锋。

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

日期:2020-01-04编辑作者:前端

jQuery实现仿百度首页滑动伸缩张开的增加期服用务成效代码,jquery首页

本文实例陈诉了jQuery完毕仿百度首页滑动伸缩张开的充分服务功效代码。分享给大家供我们仿照效法。具体如下:

那是风流浪漫款仿百度首页jQuery滑动伸缩打开的增进期服用务效能,其实是风流倜傥款伸缩菜单,只可是那么些菜单有一点点特意,只从三只向另一只伸展出去,菜单的伸缩效果平滑,设计精良。

运维效果截图如下:

9159金沙游艺场 1

在线演示地址如下:

切切实实代码如下:

<!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程序设计有着扶助。

本文实例陈说了jQuery完毕仿百度首页滑动伸缩张开的增加服务功效代码。...

本文由9159金沙游艺场-奥门金沙游艺场-[欢迎您]发布于前端,转载请注明出处:jQuery实现仿百度首页滑动伸缩展开的添加服务效

关键词:

Jsoup深入剖析Html中文文书档案9159金沙游艺场

Jsoup解析Html中文文档     1.解析和遍历一个HTML文档 如何解析一个HTML文档:     String html = "htmlheadtitleFirstparse/title/...

详细>>

javascript ES 6 class 详解

javascript ES 6 class 详解 Introduction   上篇文章大致介绍了一些ES6的特性,以及如何在低版本浏览器中使用它们。本文是...

详细>>

查看和关闭selinux

centos6.4 查看和关闭selinux 安装vsftpd服务后,客户端登录ftp报错: ftpopen127.0.0.1Connectedto127.0.0.1(127.0.0.1).220(vsFTPd2.2.2)Na...

详细>>

python第三方库系列之十9159金沙游艺场

python第三方库连串之十--commands库 咱俩此次讲的是运用commands模块试行Linuxshell命令,当咱们用Python写运转脚本时,平常...

详细>>