一个简单的jQuery实现的卷帘效果，用的时候可以在相应的div中添加代码
<html>
<head>
<script language="javascript" src="jquery-1.3.2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery测试</title>
<style type="text/css">
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
<script language = "JavaScript" type="text/javascript">
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
</script>
</head>
<body>
Click here...
<div>
<table bgcolor="#7F3F00">
<tr>2</tr>
<tr>3</tr>
<tr>4</tr>
</table>
</div>
</body>
</html>
分享到：
相关推荐
这段代码使用了jQuery的`slideToggle`方法，它会在指定速度（'fast'）下平滑地改变元素的高度，从而实现卷帘效果。 3. **CSS样式**： CSS负责菜单的外观和布局。确保正确设置`display`属性，以控制菜单项的初始...
jQuery卷帘效果实现代码（不同方向）知识点解析： 卷帘效果是一种视觉效果，常见的在网页设计中用以增加用户交互体验。它模仿现实生活中卷帘的开启和关闭，当鼠标移入或者移出一个特定区域时，通过动画效果展现或...
而“jQuery卷帘式导航栏”是一种创新的交互设计模式，它利用jQuery库为用户提供更直观、动态的导航体验。本篇文章将深入探讨jQuery卷帘式导航栏的实现原理、优势以及如何创建。 一、jQuery库简介 jQuery是一个轻量...
"可自定义高度的jQuery卷帘特效"是一个这样的实例，它允许开发者根据需求调整元素滚动时的显示高度，以实现独特且吸引人的用户体验。这个主题涉及到以下几个关键知识点： 1. **jQuery库**：jQuery是一个轻量级的...
jQuery作为一款强大的JavaScript库，提供了丰富的功能来实现各种动态效果，其中“jQuery卷帘门滑动选项卡插件”就是一种常用的增强用户体验的工具。本文将深入探讨这款名为"Timetabs"的插件，它是如何实现自动播放的...
HoverAccordion是一款基于jQuery的卷帘式菜单插件，它提供了优雅的方式来展示层次结构的数据，如网站导航或内容目录。在网页设计中，菜单是至关重要的元素，它帮助用户轻松地浏览和访问页面内容。 HoverAccordion的...
而“jquery卷帘式导航栏”则是一种创新的交互式菜单导航解决方案，它使用JavaScript库jQuery来实现动态的、平滑的卷帘效果，为用户带来更加直观且富有吸引力的浏览体验。 jQuery是一个轻量级、高性能的JavaScript库...
jQuery卷帘式菜单栏是一种常见的网页交互设计，它利用JavaScript库jQuery实现动态的菜单展开与关闭效果，为用户提供了友好的界面体验。这种菜单栏在网页设计中广泛使用，尤其适用于需要展示多级导航的网站，因为它能...
而“jQuery卷帘式二级导航菜单”则是一种交互性极强、视觉效果出色的菜单设计。这个项目利用了流行的JavaScript库jQuery来实现，特别是使用了版本1.9.1的精简版（min.js）文件，以最小的文件大小提供最大的功能。 ...
总结来说，创建一个jQuery卷帘式菜单栏涉及HTML结构设计、CSS样式设置和jQuery脚本编写。通过合理的DOM选择、事件绑定以及动画效果，我们可以实现一个既美观又兼容主流浏览器的菜单栏。在实际开发中，还需要考虑...
jQuery卷帘式导航栏是一种创新且吸引人的设计，它通过动态效果增强了用户体验，使用户在浏览网站时感到更加舒适。这种导航栏在视觉上具有层次感，通常在鼠标悬停或点击时会呈现出类似卷帘升起或降下的动画效果，增加...
卷帘效果使得内容的切换更具有动态感，提升了用户体验。 首先，我们来探讨HTML的基础结构。HTML（HyperText Markup Language）是构建网页内容的基本语言，用于定义网页的结构。在实现tab效果时，通常会用到`<div>`...
在实现JS图片卷帘门效果时，JQuery提供了一系列方便的API，如`slideUp()`和`slideDown()`，可以轻松地控制元素的隐藏与显示，实现图片的“卷起”和“放下”。 **Div+CSS** 是网页布局的基本技术。`div`是HTML中的一...
本文实例讲述了jQuery实现的卷帘门滑入滑出效果。分享给大家供大家参考，具体如下： 效果: 如果用JQ来做,其实非常简单,核心代码: [removed][removed] [removed] //jq入口函数简写方法 /* $(function ( ) { })*/ ...
在这个“JS图片卷帘门效果”中，我们主要探讨的是如何利用JavaScript来实现一种独特的图片展示方式，即卷帘门式的图片切换效果。这种效果通常用于创建引人入胜的图片相册或滑动展示。 卷帘门效果的基本概念是模拟...
这个压缩包"基于jQuery实现卷帘式二级导航菜单特效源码.zip"显然包含了一个使用jQuery创建的二级导航菜单的示例代码，我们可以从中学到如何利用jQuery来构建具有动态卷帘效果的二级导航菜单。 卷帘式二级导航菜单是...