Jquery特效二:弹出隐藏类别层

最新推荐文章于 2025-07-21 13:03:10 发布
原创 最新推荐文章于 2025-07-21 13:03:10 发布 · 739 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #class #div #flash #function #stylesheet

本文展示了一个使用jQuery实现的侧边栏展开与关闭动画效果。该效果包括一个可以点击展开的按钮，展开后显示一系列链接，并可通过关闭按钮收起。代码中详细展示了如何使用jQuery的animate和css方法来实现元素的位置变化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果图及代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <LINK media=all href="images/home.css" type=text/css rel=stylesheet>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <SCRIPT LANGUAGE="JavaScript">
<!--
        $(function () {
            //展开按钮
            $('#Bl_3').click(function () {
                //把外框架设置为显示.
                //把left和top去掉 ,试试.
                //$('#group_id').css({"display":"block"});
                $('#group_id').css({ "display": "block", "left": "199px", "top": "6px" });
                $('#group').animate({
                    left: "0"
                }, 500);
            })
            //关闭按钮
            $('#closeDiv').click(function () {
                $('#group').animate({
                    left: "-530"
                }, { queue: false, duration: 500, complete: cssrain });
                return false;
            })
            //complete: 完成animate动作后,回调其他函数.
            //把外框架设置为 隐藏.
            function cssrain() {
                $('#group_id').css("display", "none");
            }

        })
//-->
</SCRIPT>
</head>
<body>
    <form id="form1" runat="server">
<!--产品报价 开始-->
<DIV class=div_body>
<DIV class="bodyWW mt6"><!-- left -->
<DIV class=Bl id=price_areaID style="margin-left:50px">
<DIV class="Bl_1 tm" style="height:27px"><A href="http://www.cssrain.cn"  target="_blank"  class=bei12bi>cssrain jQuery demo</A></DIV>
<!-- notebook -->
<DIV class="Bl_2 bd">
<DIV class=Bl_3 id="Bl_3"><IMG src="images/btn_tp.gif"></DIV>
</DIV>
</DIV>

<!--主体内容开始 -->
<DIV id=group_id
style="BORDER-TOP-WIDTH: 0px; DISPLAY: none; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 900; BORDER-BOTTOM-WIDTH: 0px; OVERFLOW: hidden; WIDTH: 51em; POSITION: absolute; HEIGHT: 540px; BORDER-RIGHT-WIDTH: 0px">
<DIV class=B_group id=group
style="Z-INDEX: 901; LEFT: -530px; POSITION: absolute; TOP: 0px">
<DIV class=B_div>
<DIV class=B_div_1>
<DIV class=f14b><A id="closeDiv" class=bei12bi href="http://www.cssrain.cn"  >关闭</A></DIV>
</DIV>
<DIV class="B_div_2 lan12">
<DIV class=B_div_2c style="PADDING-TOP: 0px"><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>新闻资讯</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >业界动态</A> | <A href="http://www.cssrain.cn"  target="_blank" >设计竞赛</A> | <A href="http://www.cssrain.cn"  target="_blank" >设计名家</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >新锐设计师</A> | <A href="http://www.cssrain.cn"  target="_blank" >设计杂谈</A> | <A href="http://www.cssrain.cn"  target="_blank" >互联网</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >漫画欣赏</A> |
</DIV>
<DIV class=B_div_2ln1></DIV>
<DIV class=B_div_2cc style="PADDING-TOP: 0px"><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV>
<DIV class=B_div_2ln2 style="OVERFLOW: hidden"></DIV>
<DIV class=B_div_2c><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV>
<DIV class=B_div_2ln3></DIV>
<DIV class=B_div_2cc><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV>
<DIV class=B_div_2ln2></DIV>
<DIV class=B_div_2c><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV>
<DIV class=B_div_2ln4></DIV>
<DIV class=B_div_2cc><IMG src="images/a10.gif"><A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV>
<DIV class=B_div_2ln2></DIV>
<DIV class=B_div_2c style="OVERFLOW: hidden; WIDTH: 470px; HEIGHT: 112px"><IMG src="images/a10.gif">
<A href="http://www.cssrain.cn"  target="_blank" ><B>酷站欣赏</B></A><BR>
<A href="http://www.cssrain.cn"  target="_blank" >韩国酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >国内酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >欧美酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >日本酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >Flash酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >CSS酷站</A> | <br /><A href="http://www.cssrain.cn"  target="_blank" >象素酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >全部酷站</A> | <A href="http://www.cssrain.cn"  target="_blank" >发布酷站</A> |
</DIV></DIV></DIV>
<DIV class=B_div_4></DIV></DIV></DIV><!--right -->
</DIV>
</DIV>
    </form>
</body>
</html>

8、探索 jQuery Mobile：打造出色移动网页应用
yellow的专栏
07-17 14
本文全面介绍了如何使用 jQuery Mobile 打造具有原生应用体验的移动网页应用。内容涵盖 jQuery Mobile 的基础结构、页面数据角色、多页面模板、页面过渡效果、工具栏与按钮、列表视图、主题定制以及综合实践案例，如 GrandviewAve.com 移动版首页的构建流程。同时，还探讨了代码优化建议、常见问题解决方案、扩展功能、与其他前端框架的结合以及未来发展趋势，帮助开发者高效构建功能丰富、界面美观的移动网页应用。
jQuery和Javascript的基础知识与比较
muzihao6的博客
03-14 673
一、BOM：浏览器对象模型（Browser Object Model） ​ BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构； BOM可实现功能： ​ 弹出新的浏览器窗口 ​ 移动、关闭浏览器窗口以及调整窗口的大小 ​ 页面的前进、后退 window对象的常用属性： 属性名称 说 明 history 有关客户访问过的URL的信息 location 有关当前...
layer组件：jQuery弹出层与交互动效的全面应用
最新发布
weixin_29092787的博客
07-21 908
在现代Web开发中，layer组件为用户界面的交互提供了极大的便利。它是一个轻量级的弹出层组件，广泛应用于网站和应用程序中，用于创建模态框、提示框、下拉层等交互元素。layer组件设计简洁、易于集成和扩展，支持多种触发方式和样式定制，为开发人员提供了丰富的定制选项，使得在不同项目中快速实现弹出层功能成为可能。layer组件的核心特性如下：响应式设计：能够适应不同的屏幕尺寸和设备，保证用户界面的友好性。多用途：除了基础的弹出层功能，还支持警告框、确认框、加载中提示等。易用性。
实现在线QQ客服与手风琴特效的jQuery教程
weixin_32661831的博客
03-18 684
在本章节中，我们逐步了解了jQuery手风琴特效的原理、应用场景、基础实现以及高级应用与创新方法。我们看到了如何使用HTML、CSS和jQuery来构建一个简洁且功能强大的手风琴组件，以及如何通过响应式设计和动画增强来改善用户体验。在下一章中，我们将探索jQuery UI库的使用，它为我们提供了大量预构建的UI组件，可以帮助我们更高效地开发出功能丰富、风格统一的用户界面。jQuery UI 是在 jQuery 基础上开发的一套增强用户界面的交互式 JavaScript 小部件库。
jQuery
dong021103的博客
01-27 1560
JavaScript操作 jQuery基础
JQuery框架保姆级介绍
qq_57931698的博客
01-30 1078
jQuery是由美国人John Resig于2006年创建的一个开源项目，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系，它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。
JQUERY入门指南
liuxinyang666的博客
11-28 347
林炳文Evankaka原创作品。转载请注明出处http://blog.youkuaiyun.com/evankaka jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发者更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其
JQuery实例集合
热门推荐
Jackxin Xu IT技术专栏
11-06 1万+
本文收集了网络上部分有关JQuery的精彩使用例子，在此统一展示供JQuery使用时的查询。    1. 选择网页元素jQuery的基本设计和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。 选择表达式可以是CSS选择器： $(
《jquery权威指南》学习笔记
huiyinimen的博客
10-29 711
jQuery操作DOM DOM文档对象模型，为文档提供了一种结构化表示方法，通过该方法可以改变文档的内容和展示形式。 在实际运用中，DOM更像是桥梁，通过它可以实现跨平台，跨语言的标准访问。 DOM基础 单词Document即文档，当我们创建一个页面并加载到web浏览器时，DOM模型则根据该页面的内容创建了一个文档文件。 单词Object即对象，是指具有独立特性的一组数据集合，如，我们把新建的页面文档称之为文档对象，与对象相关联的特征称之为对象属性，访问对象的函数称之为对象方法。 单词Model即模型，在页
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
10-23
通过在弹出层内部添加不同类别的元素（如`showboxh2`用于标题栏），我们可以设定不同的样式，如颜色、字体大小、边框等，来形成所需的视觉效果。 8. **半透明遮罩层**: 为了提升用户体验，并且使得弹出层看起来是在...
jquery弹出职业等多选框
06-01
通常包括一个触发弹出框的按钮，以及一个包含多选框的隐藏层。当用户点击按钮时，隐藏层会显示出来，显示职业选项。 2. **CSS样式**：CSS用于美化弹出框及其内容。可以设置弹出框的位置、大小、背景颜色、边框样式...
滑动弹出的导航菜单特效
05-11
滑动弹出的导航菜单特效是一种常见的网页交互设计，它为用户提供了一种直观且吸引人的方式来探索网站的层级结构。这种特效通常基于JavaScript库，如Jquery，它简化了DOM操作，使得实现动态效果更加便捷。在本案例中...
简洁jQuery遮罩弹出层实现代码及四种效果
标题“jQuery简洁遮罩弹出层代码.zip”指向了一个包含jQuery代码实现的简洁遮罩弹出层功能的压缩文件。jQuery是一个轻量级的JavaScript库，其设计的目的是使得HTML文档遍历与操作、事件处理、动画和Ajax等操作变得...
Jquery特效十二:树形菜单效果
chengly0129的专栏
02-14 5117
<br />效果图及代码如下：<br /><br /><br />jQuery.subMenu.js:<br /><br />/*******动态下拉菜单*******<br />subMenu v1.0 -- 方便的导航菜单<br />------没剑(2008-1-17)------<br />$Date:2008年1月18日16:07:46<br />********动态下拉菜单******/<br />(function($){<br />$.fn.extend({<br />        sub
Jquery特效十:新闻纵向滚动、淡入淡出
chengly0129的专栏
02-14 2128
<br />效果图及代码如下：<br /><br /><br /><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br />    <title></title><br />    <script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><br /><script src="jqNews.js" type="text/javascript"><
Jquery特效一:图片轮换显示
chengly0129的专栏
02-14 1488
效果图及代码如下：
Jquery特效三:多行滚动显示
chengly0129的专栏
02-14 1274
效果图及代码如下：
Jquery特效七:自动切换文本框
chengly0129的专栏
02-14 1261
<br />效果图及代码如下：<br /><br /><br /><script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script><br /><script src="jquery.autotab.js" type="text/javascript"></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br /> 
Jquery特效五:图片点击变换特效
chengly0129的专栏
02-14 1245
效果图及代码如下：new document
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值