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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
VUE实现强制渲染,强制更新
Oct 29 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 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
PHP 遍历XP文件夹下所有文件
2008/11/27 PHP
PHP学习笔记之一
2011/01/17 PHP
深入解析yii权限分级式访问控制的实现(非RBAC法)
2013/06/13 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
Python入门篇之对象类型
2014/10/17 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
python判断自身是否正在运行的方法
2019/08/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
python读取mysql数据绘制条形图
2020/03/25 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
波兰购物网站:MALL.PL
2019/05/01 全球购物
StringBuilder和String的区别
2015/05/18 面试题
2014三八妇女节活动总结
2014/03/01 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
一帮一活动总结
2014/05/08 职场文书
中学生打架检讨书
2014/10/13 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2016党校学习心得体会
2016/01/07 职场文书