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 相关文章推荐
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
ExtJs 表单提交登陆实现代码
Aug 19 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
jquery等待效果示例
May 01 Javascript
下拉框select的绑定示例
Sep 04 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
设置jquery UI 控件的大小方法
Dec 12 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
Three.js加载外部模型的教程详解
Nov 10 Javascript
JavaScript封闭函数及常用内置对象示例
May 13 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php 数组的一个悲剧?
2011/05/11 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript中指定函数名称的相关方法
2015/06/04 Javascript
使用javascript提交form表单方法汇总
2015/06/25 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
jquery replace方法去空格
2017/05/08 jQuery
vue+axios实现post文件下载
2019/09/25 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
python实现html转ubb代码(html2ubb)
2014/07/03 Python
详解Python3.1版本带来的核心变化
2015/04/07 Python
python的scipy实现插值的示例代码
2019/11/12 Python
Python阶乘求和的代码详解
2020/02/14 Python
导致python中import错误的原因是什么
2020/07/01 Python
基于python实现判断字符串是否数字算法
2020/07/10 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
HTML5离线应用与客户端存储的实现
2018/05/03 HTML / CSS
高三体育教学反思
2014/01/29 职场文书
《蒲公英》教学反思
2014/02/28 职场文书
关于运动会的广播稿
2014/09/22 职场文书
旷课检讨书范文
2014/10/30 职场文书
给学校的建议书400字
2015/09/14 职场文书
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS