jquery_div.rar_div显示特效_jquery

共3个文件

html：2个

js：1个

版权申诉

13 浏览量 2022-09-24 15:01:01 上传评论收藏 18KB RAR 举报

在网页设计和开发中，jQuery 是一个非常流行的 JavaScript 库，它极大地简化了JavaScript的DOM操作，动画效果以及Ajax交互。本教程将深入探讨如何利用jQuery实现层（div）的显示与隐藏特效，以创建更加动态和交互性的用户体验。我们需要理解HTML中的`<div>`元素。`<div>`是一个块级元素，常用于组织页面布局或作为内容的容器。通过CSS，我们可以设置`div`的样式，包括尺寸、颜色、位置等，使其适应各种设计需求。在这个例子中，我们将关注如何用jQuery控制`div`的可见性。 1. 引入jQuery库：在HTML文件中，我们首先要引入jQuery库。通常，我们会通过CDN链接（内容分发网络）来引入，例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 这样确保了页面可以访问到jQuery的功能。 2. 创建`div`元素：在HTML结构中，创建一个`div`元素，为其设置ID以便于jQuery选择器选取。 ```html <div id="myDiv" style="display:none;">这是隐藏的内容</div> ``` 在这里，`style="display:none;"`使得`div`元素在页面加载时默认是隐藏的。 3. 使用jQuery显示和隐藏`div`：jQuery提供了`show()`和`hide()`方法来改变元素的可见状态。例如，我们可以通过以下代码实现点击按钮显示或隐藏`div`： ```html <button id="toggleBtn">切换显示</button> <script> $(document).ready(function() { $("#toggleBtn").click(function() { $("#myDiv").toggle(); }); }); </script> ``` 这里，`$(document).ready()`确保在文档加载完成后执行函数。`$("#toggleBtn").click()`监听按钮的点击事件，当点击按钮时，`$("#myDiv").toggle();`会执行，切换`myDiv`的显示状态。如果`div`是隐藏的，`toggle()`会将其显示；反之，如果`div`是显示的，`toggle()`会将其隐藏。 4. 添加过渡效果：为了使显示和隐藏过程更平滑，我们可以使用`fadeIn()`和`fadeOut()`方法添加淡入淡出效果。例如，修改上面的代码为： ```javascript $("#toggleBtn").click(function() { if ($("#myDiv").is(":hidden")) { $("#myDiv").fadeIn(1000); // 1000毫秒的动画时间 } else { $("#myDiv").fadeOut(1000); } }); ``` 这里，`fadeIn()`和`fadeOut()`方法接受一个参数，表示动画持续的时间，单位为毫秒。以上就是利用jQuery实现层的显示与隐藏特效的基本步骤。通过熟练掌握这些方法，你可以创建更多复杂的交互效果，提升网页的用户体验。实践过程中，可以根据实际需求调整动画速度，或者结合其他jQuery方法和CSS属性来实现更多样的显示效果。在"层的显示与隐藏"这个压缩包文件中，可能包含了示例代码和详细说明，你可以参考其中的代码进行学习和实践。

资源详情

资源评论

资源推荐

收起资源包目录

jquery_div.rar （3个子文件）

层的显示与隐藏

jquery.js 30KB

div.html 3KB

index.html 3KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>提示信息框 </title> <style type="text/css"> a{ color:#000; font-size:12px;text-decoration:none} a:hover{ color:#900; text-decoration:underline} body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden} #massage_box{ position:absolute; left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden} #mask{ position:absolute; top:0; left:0; width:expression(body.scrollWidth); height:expression(body.scrollHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden} .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%} .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff} </style>  <script language="javascript"> var Obj='' document.onmouseup=MUp document.onmousemove=MMove function MDown(Object){ Obj=Object.id document.all(Obj).setCapture() pX=event.x-document.all(Obj).style.pixelLeft; pY=event.y-document.all(Obj).style.pixelTop; } function MMove(){ if(Obj!=''){ document.all(Obj).style.left=event.x-pX; document.all(Obj).style.top=event.y-pY; } } function MUp(){ if(Obj!=''){ document.all(Obj).releaseCapture(); Obj=''; } } </script> </head> <body> <div id="massage_box"> <div class="massage"> <div class="header" onmousedown=MDown(massage_box)> <div style="display:inline; width:150px; position:absolute">本站提示信息 </div> <span onClick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'" style="float:right; display:inline; cursor:hand">× </span> </div> <ul style="margin-right:25"> <li> 本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。 </li> <li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。 </li> <li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。 </li> </ul> </div> </div> <div id="mask"> </div> <span onClick="mask.style.visibility='visible';massage_box.style.visibility='visible'" style="cursor:hand"> <a href="#">显示提示信息 </a> </span> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>bottom here </body> </html>