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 相关文章推荐
js跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
vue 使用vue-i18n做全局中英文切换的方法
Oct 29 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
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常用技巧总结(附函数代码)
2012/02/04 PHP
php调用c接口无错版介绍
2014/03/11 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
python fabric使用笔记
2015/05/09 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python计算圆周率pi的方法
2015/07/11 Python
用python写的一个wordpress的采集程序
2016/02/27 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
python FTP编程基础入门
2021/02/27 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
linux面试相关问题
2012/08/11 面试题
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
相亲大会策划方案
2014/06/05 职场文书