jquery实现隐藏在左侧的弹性弹出菜单效果


Posted in Javascript onSeptember 18, 2015

本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果。分享给大家供大家参考。具体如下:

这是一款隐藏在左侧的弹性弹出菜单,从淘宝扣下来的,也可作为JavaScript缓冲动画的典型教程。本弹性菜单可扩展性强,实际上不光可以做成菜单,也可布局一些图文混排的内容或一段视频,总之被弹出的内容是在一段Div内,怎么布置就看你的了。

运行效果截图如下:

jquery实现隐藏在左侧的弹性弹出菜单效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>隐藏在左侧的弹性弹出菜单</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script language="javascript">
$(function(){
 $("#clickopen").click(function(){
  var offset=$("#clickopen").offset().top;
  $("#page").css("top",offset+"px");
  $("#clickopen").hide();
  $("#page").animate({ 
  width: "400px",
  height: "400px",
  left: ($("body").width()/2-200)+"px",
  top: (offset-100)+"px",
  opacity: 'toggle'
   }, 300 );
  return false;
 })
 $("#closepage").click(function(){
  var offset=$("#page").offset().top;
  $("#page").animate({ 
  width: "0px",
  height: "0px",
  left: "0px",
  top: (offset+100)+"px",
  opacity: 'toggle'
   }, 300 );
  $("#clickopen").show();
  return false;
 })
})
</script>
<style>
body{text-align:center;font-size:12px;color:#333;font-family:"宋体";background:#fff;margin:0 auto;padding:0;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p,dt,dd,dl{border:0;margin:0;padding:0;}
img,a img{border:0;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:12px;font-weight:400;margin:0;padding:0;}
ul,ol,li{list-style:none;}
td{word-break:break-all;}
a{color:#003cc8;text-decoration:none;}
a:hover{text-decoration:underline;color:blue;}
.f_tahoma{font-family:Tahoma;}
em,i{font-style:normal;}
.ask{overflow:hidden;position:fixed;left:0px;top:200px;z-index:2}
.leftButton{background:red;width:20px;height:80px;text-align:center;line-height:20px;display:block;color:#fff; }
.content{background:#999;width:800px;height:2000px;margin:0 auto}
* html,* html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
.ask{_position:absolute;_bottom:auto;_left:0;_top: expression(documentElement.scrollTop + 200 + "px");}
.page{width:0px; position:absolute;height:0px;left:0;top:0px;z-index:1;overflow:hidden;display:none}
.page div{border:1px solid #000;overflow:hidden;width:398px}
.page h1{height:40px;text-align:center;font-size:20px;color:#fff;background:red;line-height:40px}
.page h1 a{float:right;color:#000;margin-top:-15px}
.page p{padding:10px;line-height:22px;font-size:14px;text-align:left;background:#fff;height:400px;width:378px}
</style>
</head>
<body>
<div class="ask">
<a class="leftButton" href="#" id="clickopen">点击弹出</a>
</div>
<div class="content"></div>
<div class="page" id="page">
 <div>
  <h1><a href="#" id="closepage">x</a>您好,欢迎光临!</h1>
  <p>三水点靠木是国内专业的网站建设资源、脚本编程学习类网站,提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料。
</p>
 </div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
js实现select组件的选择输入过滤代码
Oct 14 Javascript
javascript中callee与caller的区别分析
Apr 20 Javascript
jquery获取select选中值的方法分析
Dec 22 Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 Javascript
JS实现继承的几种常用方式示例
Jun 22 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
element中的$confirm的使用
Apr 26 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 #Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 #Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 #Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 #Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 #Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 #Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 #Javascript
You might like
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
Yii框架form表单用法实例
2014/12/04 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
js右键菜单效果代码
2007/07/21 Javascript
javascript 函数使用说明
2010/04/07 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
使用Browserify配合jQuery进行编程的超级指南
2015/07/28 Javascript
基于AngularJS+HTML+Groovy实现登录功能
2016/02/17 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
pyqt5 QScrollArea设置在自定义侧(任何位置)
2019/09/25 Python
Python基于QQ邮箱实现SSL发送
2020/04/26 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
集世界奢侈品和设计师品牌的意大利精品买手店:Tessabit
2019/08/17 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
个人简历自我鉴定
2013/10/11 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
公司介绍信范文
2015/01/31 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
Python日志模块logging用法
2022/06/05 Python