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和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue使用axios实现excel文件下载的功能
Jul 16 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 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入门教程 精简版
2009/12/13 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
ECMAScript 基础知识
2007/06/29 Javascript
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery性能优化的38个建议
2014/03/04 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
如何编写jquery插件
2017/03/29 jQuery
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
vue axios 二次封装的示例代码
2017/12/08 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
JS实现多选框的操作
2020/06/24 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python连接mysql调用存储过程示例
2014/03/05 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
猫途鹰:全球领先的旅游点评社区
2017/04/07 全球购物
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
即兴演讲稿
2014/01/04 职场文书
银行开业庆典方案
2014/02/06 职场文书
统计专业自荐书
2014/07/06 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
2014小学教师年度考核工作总结
2014/12/03 职场文书
董存瑞观后感
2015/06/11 职场文书
关于PostgreSQL JSONB的匹配和交集问题
2021/09/14 PostgreSQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript