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


Posted in Javascript onSeptember 09, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

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

Javascript 相关文章推荐
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
jquery实现无限分级横向导航菜单的方法
Mar 12 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
Apr 12 Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
浅谈Node 异步IO和事件循环
May 05 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
javascript实现日期时间动态显示示例代码
Sep 08 #Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 #Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 #Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 #Javascript
js淡入淡出焦点图幻灯片效果代码分享
Sep 08 #Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 #Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 #Javascript
You might like
php项目打包方法
2008/02/18 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
laravel5.4生成验证码的实例讲解
2017/08/05 PHP
许愿墙中用到的函数
2006/10/07 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
2012/10/11 Javascript
js简单实现让文本框内容逐个字的显示出来
2013/10/22 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
2015/11/09 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Python中的Matplotlib模块入门教程
2015/04/15 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用python计算三角形的斜边例子
2020/04/15 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
加拿大便宜的隐形眼镜商店:Clearly
2016/09/15 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
住宅使用说明书
2014/05/09 职场文书
干部考察材料范文
2014/12/24 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
工伤调解协议书
2016/03/21 职场文书
CSS3鼠标悬浮过渡缩放效果
2021/04/17 HTML / CSS
如何用JS实现简单的数据监听
2021/05/06 Javascript
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android