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 相关文章推荐
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
在Firefox下js select标签点击无法弹出
Mar 06 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
BootStrap实现轮播图效果(收藏)
Dec 30 Javascript
Vue通过input筛选数据
Oct 26 Javascript
vue根据值给予不同class的实例
Sep 29 Javascript
浅析js中mvvm模式实现的原理
Oct 06 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 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
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JavaScript 页面编码与浏览器类型判断代码
2010/06/03 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
2013/07/10 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
Javascript复制实例详解
2016/01/28 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
form表单序列化详解(推荐)
2017/08/15 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
python实现感知机线性分类模型示例代码
2019/06/02 Python
一文秒懂python读写csv xml json文件各种骚操作
2019/07/04 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
python psutil模块使用方法解析
2019/08/01 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
2020/08/20 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
婚前财产公证书
2014/04/10 职场文书
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
Java实现给Word文件添加文字水印
2022/02/15 Java/Android