jquery实现隐藏在左侧的弹性弹出菜单效果

x您好，欢迎光临！" >x您好，欢迎光临！

首页

web前端

js教程

jquery实现隐藏在左侧的弹性弹出菜单效果_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:38 PM

jquery 隐藏

本文实例讲述了jquery实现隐藏在左侧的弹性弹出菜单效果。分享给大家供大家参考。具体如下：

这是一款隐藏在左侧的弹性弹出菜单，从淘宝扣下来的，也可作为JavaScript缓冲动画的典型教程。本弹性菜单可扩展性强，实际上不光可以做成菜单，也可布局一些图文混排的内容或一段视频，总之被弹出的内容是在一段Div内，怎么布置就看你的了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-left-hidden-alert-adv-codes/

具体代码如下：

<!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 id="a-href-id-closepage-x-a-您好-欢迎光临"><a href="#" id="closepage">x</a>您好，欢迎光临！</h1>
  <p>脚本之家是国内专业的网站建设资源、脚本编程学习类网站，提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效，为站长与网络编程从业者提供学习资料。
</p>
 </div>
</div>
</body>
</html>

登录后复制

希望本文所述对大家的jQuery程序设计有所帮助。

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7385

Java教程

1629

CakePHP 教程

1357

Laravel 教程

1267

PHP教程

1216

显示更多

Related knowledge

不拉黑不删除怎么隐藏微信好友？不拉黑不删除隐藏微信好友的方法 Mar 13, 2024 pm 07:19 PM

　　不拉黑不删除怎么隐藏微信好友？不少的用户们想隐藏一些好友不知道要怎么去操作，下面就让本站来为用户们来仔细的介绍一下不拉黑不删除隐藏微信好友的方法吧。　　不拉黑不删除隐藏微信好友的方法　　方法一：　　1、首先打开微信软件，在微信页面找到通讯录，点击”我的“。　　2、然后我们进入到设置页面。　　3、找到”隐私“选项，点击进去。　　4、接着点击”不让他看“。　　5、进入到不让她看页面，点击”+“勾选需要隐藏的好友

抖音短视频怎么隐藏作品隐藏个人视频作品的方法 Mar 12, 2024 pm 12:49 PM

　　抖音短视频app软件内提供的短视频作品非常多，随心所欲想看就看，而且都是永久免费提供的，不同类型的视频直播频道都是开放的，所有的视频内容都是原创的，带给大家最满意的观看方式。输入账号在线登录，各种精彩万分的短视频推送，都是根据大家日常看的，精准推荐，还能进入直播间与主播互动聊天，让你的心情更加愉悦。个人上传的作品也能隐藏起来，非常简单一键设置，刷到哪里看到哪，上下滑动无数网友的实时评论抢先看，还能分享日常的生活动态，现在小编在线详细为抖音短视频用户们推送隐藏个人视频作品的方法。首先打开抖音短

小米14如何隐藏灵动岛？ Mar 18, 2024 pm 03:40 PM

除了令人惊叹的硬件配置和出色的功能，小米14还隐藏着一个让人着迷的地方—灵动岛。在这里，用户可以尽情享受个性化定制以及创意无限的手机体验。不过不是所有人都喜欢这个功能的，那么，小米14如何隐藏灵动岛呢？让我们一起了解一下吧。小米14如何隐藏灵动岛？1.打开小米14手机的设置应用。2.滚动找到“特色功能”选项并点击进入。3.在特色功能页面中找到“隐藏灵动岛”选项并打开它。4.确认开启隐藏灵动岛后，返回到桌面即可看到灵动岛已被隐藏。

抖音隐藏作品的详细教程 Mar 25, 2024 pm 03:11 PM

1、首先点击【+】进行拍摄。2、然后点击右下角的勾确认完成拍摄。点击】下一步【，3、点击【谁可以看】。选择【私密】即可，情境二：已拍作品，1、点击【我】，选择【作品】。2、点击右旁【三点】标识。3、向左滑动，找到【权限设置】，4、点击】设为私密】即可。

深度清理手机隐藏垃圾的方法（彻底清除手机内存垃圾） Jun 01, 2024 am 09:29 AM

手机已经成为我们日常生活中不可或缺的一部分，随着科技的不断进步和智能手机的普及。这些垃圾文件占用了宝贵的存储空间，随着时间的推移、手机中会积累大量的隐藏垃圾，并且会导致手机性能下降，然而。了解如何深度清理手机隐藏垃圾成为每个手机用户必备的知识。一、查找并清除无用的应用缓存二、删除不再使用的应用程序三、清理照片和视频缓存四、彻底清理临时文件和下载文件夹五、整理和清理联系人和短信记录六、清理系统缓存七、卸载无用的系统应用程序八、清理浏览器缓存和历史记录九、删除无效的音乐和音频文件十、优化手机文件系统

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

See all articles

jquery实现隐藏在左侧的弹性弹出菜单效果_jquery

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题