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 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
JavaScript高级程序设计
Dec 29 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
基于AngularJS的简单使用详解
Sep 10 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
使用vscode快速建立vue模板过程详解
Oct 10 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法
2014/06/23 PHP
php实现的CSS更新类实例
2014/09/22 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
PHP实现的装箱算法示例
2018/06/23 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
jquery插件之easing使用
2010/08/19 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
详解nodejs操作mongodb数据库封装DB类
2017/04/10 NodeJs
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
jquery.pager.js实现分页效果
2019/07/29 jQuery
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
js实现验证码功能
2020/07/24 Javascript
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
使用setup.py安装python包和卸载python包的方法
2013/11/27 Python
Python中使用Inotify监控文件实例
2015/02/14 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
pyhton列表转换为数组的实例
2018/04/04 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python实现矩阵打印
2019/03/02 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
中专三年学习的个人自我评价
2013/12/12 职场文书
课程改革实施方案
2014/03/16 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
4S店销售内勤岗位职责
2015/04/13 职场文书