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 相关文章推荐
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
Dec 04 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
Sep 13 Javascript
解析JavaScript模仿块级作用域
Dec 29 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
Javascript webpack动态import
Apr 19 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
模拟xcopy的函数
2006/10/09 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
JavaScript中的ArrayBuffer详细介绍
2014/12/08 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
python Pygame的具体使用讲解
2017/11/03 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
Python日期时间Time模块实例详解
2019/04/15 Python
在Django下测试与调试REST API的方法详解
2019/08/29 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
运动会广播稿60字
2014/01/15 职场文书
电视购物广告词
2014/03/19 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
活动主持人开场白
2015/05/28 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
HTML基本元素标签介绍
2022/02/28 HTML / CSS
vue判断按钮是否可以点击
2022/04/09 Vue.js