JS滑动门_JStab标签页效果大合集(新浪腾讯雅虎)资源-CSDN下载

共15个文件

htm：7个

rar：4个

html：2个

需积分: 10 170 浏览量 2013-07-22 10:32:26 上传评论收藏 109KB RAR 举报

JavaScript（简称JS）是一种轻量级的编程语言，广泛用于网页和网络应用的开发，尤其在实现用户交互、页面动态效果方面发挥着重要作用。滑动门（Sliding Doors）和Tab标签页效果是JS中常见的两种增强用户体验的技术，通常用于网站导航和内容展示。滑动门效果通常指的是网页元素（如按钮或导航菜单）的两部分——边框和内容——可以独立移动，创造出一种平滑过渡的效果。这种技术可以让界面更加生动和吸引人。在提供的压缩包中，可能包含了多种不同风格和实现方式的滑动门效果，例如`code3.htm`、`code7good.htm`和`code5.htm`等文件，这些文件可能是HTML代码示例，演示了如何用JS来创建滑动门效果。 Tab标签页效果则是网页上的一种组织内容的方式，通过点击不同的标签，显示或隐藏相应的内容区域。这种效果可以有效地节省空间，提高用户浏览效率。例如，`code4.htm`、`code.6htm.htm`和`code2.htm`可能包含不同实现策略的Tab切换效果，可能涵盖了基础的CSS样式控制以及更复杂的JS事件处理和DOM操作。在实际应用中，滑动门和Tab标签页效果经常结合使用，比如在`模仿雅虎，一段非常漂亮的滑门代码.rar`中，很可能是一个结合了这两种效果的实例，它可能模拟了雅虎网站的导航结构，既具有滑动的边框效果，又有Tab切换的功能。这类代码的学习可以帮助开发者理解如何优雅地实现类似的效果，提升网页的用户体验。在学习和使用这些代码时，你需要理解以下关键概念和技术： 1. **DOM操作**：JS通过DOM（文档对象模型）来操作HTML元素，添加、删除或修改元素属性，实现滑动门和Tab效果。 2. **事件监听**：通过监听用户的点击或其他交互，触发相应的JS函数执行，实现内容的切换和动画效果。 3. **CSS样式控制**：JS可以改变元素的CSS样式，如宽度、高度、位置等，实现视觉上的滑动效果。 4. **动画效果**：利用CSS3的transition或JS库（如jQuery）的动画功能，使元素的移动更平滑自然。 5. **封装和模块化**：将滑动门和Tab效果封装成可复用的函数或组件，便于在其他项目中应用。通过研究和实践这些代码，开发者可以深入理解JS在网页动态效果中的应用，提高前端开发技能。同时，也可以借鉴和学习各大网站的优秀设计，提升自己的设计感和用户体验意识。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （15个子文件）

code5.htm 8KB

模仿雅虎，一段非常漂亮的滑门代码.rar 43KB

code7good.htm 9KB

2.html 3KB

3.txt 3KB

4.html 4KB

code3.htm 9KB

腾讯财经.rar 14KB

code.6htm.htm 8KB

4.txt 4KB

code.htm 5KB

code2.htm 8KB

good.rar 10KB

code4.htm 8KB

新浪网.rar 29KB

<!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=gb2312" /> <title>兼容IE7 IE8 FF 等主流浏览器多标签滑动门</title> <style type="text/css"> body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 542px; margin: 0 auto; border-bottom:1px #C7C7CD solid; background:#d5d5d5; background-position:left; background-repeat:repeat-y; margin-bottom:2px; } .nTab .TabTitle{ clear: both; height: 26px; overflow: hidden; } .nTab .TabTitle ul{ margin:0; padding:0; } .nTab .TabTitle li{ float: left; width: 60px; cursor: pointer; padding-top: 6px; padding-right: 0px; padding-left: 0px; padding-bottom: 7px; list-style-type: none; } .nTab .TabTitle .active{ background:url(http://www.websjy.com/club/websjy_index/images/finance_nc_080124_ws_001.gif) left -25px no-repeat;border-left:1px #C7C7CD solid;border-top:1px #C7C7CD solid;border-bottom:1px #fff solid;} .nTab .TabTitle .normal{ background:url(http://www.websjy.com/club/websjy_index/images/finance_nc_080124_ws_001.gif);border-top:1px #C7C7CD solid;border-bottom:1px #C7C7CD solid;} .nTab .TabContent{ width:auto;background:#fff; margin: 0px auto; padding:10px 0 0 0; border-right:1px #C7C7CD solid;border-left:1px #C7C7CD solid; } .none {display:none;} </style> <script type="text/javascript"> function nTabs(thisObj,Num){ if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.length; i++) { if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj+"_Content"+i).style.display = "block"; }else{ tabList[i].className = "normal"; document.getElementById(tabObj+"_Content"+i).style.display = "none"; } } } </script> </head> <body> <br /> <br /> <center> <div style="text-align:center; margin-left:200px;">  <div class="nTab">  <div class="TabTitle"> <ul id="myTab0"> <li class="active" onclick="nTabs(this,0);">全部全部</li> <li class="normal" onclick="nTabs(this,1);">日志全部</li> <li class="normal" onclick="nTabs(this,2);">咨询全部</li> <li class="normal" onclick="nTabs(this,3);">相册全部</li> <li class="normal" onclick="nTabs(this,4);">商城全部</li> <li class="normal" onclick="nTabs(this,5);">社区全部</li> <li class="normal" onclick="nTabs(this,6);">社区全部</li> <li class="normal" onclick="nTabs(this,7);">社区全部</li> <li class="normal" onclick="nTabs(this,8);">社区全部</li> </ul> </div>  <div class="TabContent"> <div id="myTab0_Content0"> 欢迎访问：<a href="http://www.alixixi.com" target="_blank">阿里西西WEB开发 </a></div> <div id="myTab0_Content1" class="none"><a href="http://www.alixixi.com">计源论坛计源论坛</a></div> <div id="myTab0_Content2" class="none"><a href="http://www.alixixi.com">计源论坛22</a></div> <div id="myTab0_Content3" class="none"><a href="http://www.alixixi.com">计源论坛33</a></div> <div id="myTab0_Content4" class="none"><a href="http://www.alixixi.com">计源论坛4</a></div> <div id="myTab0_Content5" class="none"><a href="http://www.alixixi.com">5计源论坛55</a></div> <div id="myTab0_Content6" class="none"><a href="http://www.alixixi.com">6计源论坛66</a></div> <div id="myTab0_Content7" class="none"><a href="http://www.alixixi.com">7计源论坛77</a></div> <div id="myTab0_Content8" class="none"><a href="http://www.alixixi.com">88计源论坛8</a></div> </div> </div>  </div> </center> </body> </html></font> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

评论收藏

内容反馈