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 相关文章推荐
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
原生js写的放大镜效果
Aug 22 Javascript
Eval and new funciton not the same thing
Dec 27 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
node.js中watch机制详解
Nov 17 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
javascript实现倒计时提示框
Mar 02 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
GD输出汉字的函数的分析
2006/10/09 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
详解JS异步加载的三种方式
2017/03/07 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
vue如何截取字符串
2019/05/06 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
JS中准确判断变量类型的方法
2020/06/01 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
js实现批量删除功能
2020/08/27 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
PHP魔术方法__ISSET、__UNSET使用实例
2014/11/25 Python
PyMongo安装使用笔记
2015/04/27 Python
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python list元素为tuple时的排序方法
2018/04/18 Python
python实现根据文件关键字进行切分为多个文件的示例
2018/12/10 Python
导致python中import错误的原因是什么
2020/07/01 Python
Python通过队列来实现进程间通信的示例
2020/10/14 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
利用CSS3实现圆角的outline效果的教程
2015/06/05 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
员工辞职信范文大全
2015/05/12 职场文书
企业财务管理制度范本
2015/08/04 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书