<!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="js/jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
});
function hiden() {
$("#divObj").hide();//hide()函数,实现隐藏,括号里还可以带一个时间参数(毫秒)例如hide(2000)以2000毫秒的速度隐藏,还可以带slow,fast
}
function slideToggle() {
$("#divObj").slideToggle(2000);//窗帘效果的切换,点一下收,点一下开,参数可以无,参数说明同上
}
function show() {
$("#divObj").show();//显示,参数说明同上
}
function toggle() {
$("#divObj").toggle(2000);//显示隐藏切换,参数可以无,参数说明同上
}
function slide() {
$("#divObj").slideDown();//窗帘效果展开
}
</script>
</head>
<body>
<h3>div里内容的显示隐藏特效</h3>
<input type="button" value="隐藏" onclick="hiden()" />
<input type="button" value="显示" onclick="show()" />
<input type="button" value="窗帘效果显示2" onclick="slide()" />
<input type="button" value="窗帘效果的切换" onclick="slideToggle()" />
<input type="button" value="隐藏显示效果切换" onclick="toggle()" />
<div id="divObj" style="display: none">
1.测试例子<br /> 2.测试例子<br /> 3.测试例子<br /> 4.测试例子<br /> 5.测试例子<br />
6.测试例子<br /> 7.测试例子<br /> 8.测试例子<br /> 9.测试例子<br /> 0.测试例子<br />
</div>
</body>
</html>
分享到：
相关推荐
接下来，我们来看一下如何使用jQuery控制`div`元素的显示和隐藏。在JavaScript部分，定义了四个函数：`hiden()`, `slideToggle()`, `show()`, 和 `toggle()`，这些函数分别对应不同的显示和隐藏效果。 1. `hiden()`...
【jQuery时间轴特效详解】 在Web开发中，时间轴是一种常用的设计元素，它能清晰地展示事件序列，帮助用户理解信息的流程。本教程将详细讲解如何利用jQuery库来实现一个超酷的时间轴特效，让网页更加生动有趣。 ...
48.jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动...
现在，我们需要编写jQuery代码来控制加载特效的显示和隐藏。这通常在Ajax请求前后或页面加载完成后执行： ```javascript $(document).ready(function() { // 页面加载完成后显示加载特效 $("#loading-mask").show...
`初始时隐藏按钮，之后通过jQuery来控制它的显示和隐藏。 最后，我们需要在`script.js`中编写jQuery代码来实现动态效果： ```javascript $(document).ready(function() { $(window).scroll(function() { if ($...
在jQuery中，我们可以使用`.click()`方法来监听选项卡标题的点击事件，`.hide()`和`.show()`方法来控制内容面板的显示和隐藏，`.addClass()`和`.removeClass()`来切换标题的选中状态。jQuery还提供了动画效果，如`....
在这个特效中，我们需要在鼠标悬停图片时显示遮罩和提示层，离开时则隐藏它们。遮罩通常是一个半透明的div，用于覆盖图片并提供背景暗化效果，而提示层可以包含额外信息或描述。 创建一个CSS类来定义遮罩和提示层的...
5. **响应式设计**：为了适应不同设备和屏幕尺寸，我们需要确保卡片特效在手机、平板和桌面电脑上都能正常工作。这通常涉及到媒体查询（Media Queries）的应用，根据屏幕宽度调整卡片的布局和大小。 6. **优化与...
本篇文章将详细讲解如何使用jQuery库来实现一个带有图片大小切换和描述展示的幻灯片特效，这适用于网站的首页展示、产品介绍等多个场景。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、...
在jQuery中，可以通过简单的CSS或JavaScript操作来显示和隐藏这个GIF，以告知用户页面正在后台处理数据。例如，可以使用`$.fn.show()`和`$.fn.hide()`方法控制其可见性。 4. **示例代码**：`demo.html`文件可能包含...
为了实现自动切换和用户交互，我们可以利用jQuery编写一个简单的插件。以下是一个基础的实现： ```javascript (function($) { $.fn.fullscreenSlider = function(options) { var settings = $.extend({ duration...
// 隐藏所有图片，显示第一张 setInterval(nextSlide, 3000); // 每3秒切换一次 }); ``` **自定义功能** "Jquery幻灯片焦点图"的另一个亮点是可自定义性。通过调整JavaScript代码，你可以实现各种特效，如添加...
我们在网站开发的时候经常会有点击空白处去隐藏已有的元素，DIV或者其他，本次教给大家如何用jquery实现这个特效的方法。 一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码...
`jb51.net`可能是一个网站，提供各种编程教程和资源，而`脚本之家`是中国一个知名的编程学习平台，可能会有更详细的jQuery教程和Banner制作方法。 7. **学习与实践** 通过分析这个实例，开发者可以了解到如何结合...
1. **隐藏初始图片**：使用`.hide()`方法隐藏所有图片，只显示第一张。 2. **设定定时器**：使用`setInterval()`创建一个定时器，按照一定时间间隔（如2秒）执行滚动操作。 3. **图片切换**：使用`.fadeOut()`淡出...
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件和样式，以便快速构建美观且响应式的网页。在“bootstrap演示20种不同的手机响应式弹出层modal特效”这个主题中，我们将深入探讨Bootstrap的...
标题中的“使用jQuery实现图文切换效果另加特效”是指通过jQuery库来创建一种交互式的网页设计，其中包含图像和文本的交替展示，并且带有额外的视觉效果。这种效果常见于电商网站的产品展示或新闻网站的文章预览，它...
可以使用`<div>`标签创建容器，如`<div class="product">`，并在其中嵌套图片`<img>`和隐藏的商品列表`<ul class="popup-list">`。列表项`<li>`将包含每个商品的详细信息。 2. **CSS样式**： `demo.css` 文件将...