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 相关文章推荐
js创建子窗口并且回传值示例代码
Jul 02 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
原生js实现轮播图的示例代码
Feb 20 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
Javascript Promise用法详解
May 10 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP中使用GD库绘制折线图 折线统计图的绘制方法
2015/11/09 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
javascript入门基础之私有变量
2010/02/23 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
2016/09/21 Javascript
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
详解vue几种主动刷新的方法总结
2019/02/19 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
Python操作SQLite简明教程
2014/07/10 Python
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
对Python 窗体(tkinter)文本编辑器(Text)详解
2018/10/11 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
《长相思》听课反思
2014/04/10 职场文书
工程售后服务方案
2014/06/08 职场文书
人力资源管理求职信
2014/08/07 职场文书
关于读书的活动方案
2014/08/14 职场文书
党员自评材料范文
2014/12/17 职场文书
催款通知书范文
2015/04/17 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书