`
zhanglu0223
  • 浏览: 22721 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

jquery之超简单的div显示和隐藏特效demo

 
阅读更多
<!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 src="jquery_last.js" type="text/javascript"></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显示和隐藏特效demo(分享)

    接下来,我们来看一下如何使用jQuery控制`div`元素的显示和隐藏。在JavaScript部分,定义了四个函数:`hiden()`, `slideToggle()`, `show()`, 和 `toggle()`,这些函数分别对应不同的显示和隐藏效果。 1. `hiden()`...

    分享Jquery实现超酷的时间轴特效

    【jQuery时间轴特效详解】 在Web开发中,时间轴是一种常用的设计元素,它能清晰地展示事件序列,帮助用户理解信息的流程。本教程将详细讲解如何利用jQuery库来实现一个超酷的时间轴特效,让网页更加生动有趣。 ...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    48.jQuery电子商务网站产品展示插件之仿苏宁易购商城产品图展示特效 49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动...

    jQuery遮罩Loading加载特效

    现在,我们需要编写jQuery代码来控制加载特效的显示和隐藏。这通常在Ajax请求前后或页面加载完成后执行: ```javascript $(document).ready(function() { // 页面加载完成后显示加载特效 $("#loading-mask").show...

    div css3样式表制作jquery返回顶部特效

    `初始时隐藏按钮,之后通过jQuery来控制它的显示和隐藏。 最后,我们需要在`script.js`中编写jQuery代码来实现动态效果: ```javascript $(document).ready(function() { $(window).scroll(function() { if ($...

    jQuery选项卡特效制作.zip

    在jQuery中,我们可以使用`.click()`方法来监听选项卡标题的点击事件,`.hide()`和`.show()`方法来控制内容面板的显示和隐藏,`.addClass()`和`.removeClass()`来切换标题的选中状态。jQuery还提供了动画效果,如`....

    Jquery实现鼠标hover图片遮罩弹出提示层特效.

    在这个特效中,我们需要在鼠标悬停图片时显示遮罩和提示层,离开时则隐藏它们。遮罩通常是一个半透明的div,用于覆盖图片并提供背景暗化效果,而提示层可以包含额外信息或描述。 创建一个CSS类来定义遮罩和提示层的...

    jQuery HTML5人物介绍卡片特效特效代码

    5. **响应式设计**:为了适应不同设备和屏幕尺寸,我们需要确保卡片特效在手机、平板和桌面电脑上都能正常工作。这通常涉及到媒体查询(Media Queries)的应用,根据屏幕宽度调整卡片的布局和大小。 6. **优化与...

    Jquery实现图片大小切换带描述的幻灯片特效

    本篇文章将详细讲解如何使用jQuery库来实现一个带有图片大小切换和描述展示的幻灯片特效,这适用于网站的首页展示、产品介绍等多个场景。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、...

    jquery页面加载效果

    在jQuery中,可以通过简单的CSS或JavaScript操作来显示和隐藏这个GIF,以告知用户页面正在后台处理数据。例如,可以使用`$.fn.show()`和`$.fn.hide()`方法控制其可见性。 4. **示例代码**:`demo.html`文件可能包含...

    jquery满屏焦点图.zip

    为了实现自动切换和用户交互,我们可以利用jQuery编写一个简单的插件。以下是一个基础的实现: ```javascript (function($) { $.fn.fullscreenSlider = function(options) { var settings = $.extend({ duration...

    Jquery幻灯片焦点图

    // 隐藏所有图片,显示第一张 setInterval(nextSlide, 3000); // 每3秒切换一次 }); ``` **自定义功能** "Jquery幻灯片焦点图"的另一个亮点是可自定义性。通过调整JavaScript代码,你可以实现各种特效,如添加...

    jquery如何实现点击空白处隐藏元素

    我们在网站开发的时候经常会有点击空白处去隐藏已有的元素,DIV或者其他,本次教给大家如何用jquery实现这个特效的方法。 一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码...

    jquery-banner-jiaodiantu.rar banner实例

    `jb51.net`可能是一个网站,提供各种编程教程和资源,而`脚本之家`是中国一个知名的编程学习平台,可能会有更详细的jQuery教程和Banner制作方法。 7. **学习与实践** 通过分析这个实例,开发者可以了解到如何结合...

    jquery图片滚动效果

    1. **隐藏初始图片**:使用`.hide()`方法隐藏所有图片,只显示第一张。 2. **设定定时器**:使用`setInterval()`创建一个定时器,按照一定时间间隔(如2秒)执行滚动操作。 3. **图片切换**:使用`.fadeOut()`淡出...

    bootstrap演示20种不同的手机响应式弹出层modal特效

    Bootstrap是世界上最流行的前端开发框架之一,它为开发者提供了丰富的组件和样式,以便快速构建美观且响应式的网页。在“bootstrap演示20种不同的手机响应式弹出层modal特效”这个主题中,我们将深入探讨Bootstrap的...

    使用jquery实现图文切换效果另加特效

    标题中的“使用jQuery实现图文切换效果另加特效”是指通过jQuery库来创建一种交互式的网页设计,其中包含图像和文本的交替展示,并且带有额外的视觉效果。这种效果常见于电商网站的产品展示或新闻网站的文章预览,它...

    jQuery唯品会鼠标悬停图片弹出商品列表代码

    可以使用`&lt;div&gt;`标签创建容器,如`&lt;div class="product"&gt;`,并在其中嵌套图片`&lt;img&gt;`和隐藏的商品列表`&lt;ul class="popup-list"&gt;`。列表项`&lt;li&gt;`将包含每个商品的详细信息。 2. **CSS样式**: `demo.css` 文件将...

Global site tag (gtag.js) - Google Analytics