100个Tab 滑动门实例

最新推荐文章于 2019-08-14 10:41:19 发布
最新推荐文章于 2019-08-14 10:41:19 发布
阅读量502 收藏
点赞数
分类专栏： Web技术 文章标签： tab 滑动门 鼠标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iPhone7z/article/details/25037547
版权

最近在重写一个门户网站，既然是门户网站那新闻量肯定是不小的，那如何在有限的版面内有效的显示更多的信息，jsp的滑动门形式是必不可少的

 

为什么不用ajax，百度说了，少用ajax。。。。。。。。

 

废话少说，先看图：

 

 

 

 

 

 

 

 

 

其实没有多少的技术含量，算是一个集锦，方便自己以后选择样式，下载地址http://download.csdn.net/detail/spritenet/5250927

iPhone7z
关注
专栏目录
html滑动门案例
08-09
滑动门案例
CSS 实例系列 - 01 - Tab 滑动门
最新发布
weixin_41806099的博客
01-12 2369
Hello 小伙伴们早上、中午、下午、晚上和深夜好，这里是 jsliang~本 CSS 系列文章：主推学以致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知识，适合新人学习 + 大佬复习。如果文章在一些细节上没写清楚或者误...
DOM--滑动门案例
wgf1997的博客
08-14 220
效果图 通过鼠标移动实现图片滑动门效果 代码 html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
YTabs网页常用效果集【TAB、滑动门，焦点图，多级菜单】 等.rar
07-10
YTabs网页常用效果集【TAB、滑动门，焦点图，多级菜单】等，还有不少的特效，这里不列举了，截图中可以看到其它效果。
JS实现同一个网页布局滑动门和TAB选项卡实例
10-23
整体来说，这个实例通过结合CSS和JavaScript，向我们展示了一个实用的滑动门和TAB选项卡的实现方式。通过简单的自定义函数和循环遍历，就能完成内容的切换和样式的调整，非常具有参考和借鉴价值。对于希望在网页中...
js实现左侧网页tab滑动门效果代码
11-25
总结来说，这个实例展示了如何结合HTML、CSS和JavaScript实现一个基本的网页Tab滑动门效果。了解这一技术有助于开发者创建更动态、更具交互性的网页界面。学习并理解这个实例，不仅可以掌握一种实用的网页设计技巧，...
Tab滑动门与导航菜单JS+CSS代码
01-23
总结来说，"Tab滑动门与导航菜单JS+CSS代码"是一个关于网页交互设计的资源，它包含了使用JavaScript和CSS实现的Tab滑动门效果以及导航菜单的实例。通过理解和应用这些代码，开发者可以创建更动态、更友好的网页界面...
漂亮的伸缩滑动门！简单但是很好看！动画效果
04-03
漂亮的伸缩滑动门！简单但是很好看！动画效果。很漂亮，跟flash差不多！
jQuery 移动式的Tab滑动门菜单
07-31
jQuery 移动式的Tab滑动门菜单 jQuery 移动式的Tab滑动门菜单
Tab 滑动门合集（有列表、图文结合）
05-12
内容索引:脚本资源,CSS特效,Tab,选项卡,CSS滑动门　　Tab 滑动门合集，这个相信对你很有帮助，整理了几个非常实用的网页滑动门，有图片切换风格的、有图文混合的列表风格、还有标准风格，另外还有一种是目前比较游行的交友网站常用的选项卡，部分效果你可以看一下演示图上，不多介绍了，有需要的就下载吧。
漂亮的滑动门导航例子
04-05
两个滑动门导航的例子，CSS+DIV，为什么资源描述非得要写这么长才行
DIV滑动门代码
09-06
body{ color: #000; font-family: "宋体", arial; font-size: 12px; background: #fff; text-align: center; margin: 0; } .nTab{ float: left; width: 240px; 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(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(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;} 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"; } } } 预拔电杆 预等电杆 普拔电杆 部预电杆 欢迎访问：阿里西西WEB开发 计源论坛 计源论坛 计源论坛22 计源论坛33
网页滑动门技术，滑动门特效
y_h_t的专栏
12-06 1135
网页滑动门技术，滑动门特效
四款滑动门TAB导航菜单特效
06-06
JS处理的四款滑动门TAB导航菜单特效，具有非常好的示例和代码重用性！
页面javascript学习01-滑动门01
Aiken的自由世界
03-13 847
这两天根据网上收集的更改了个滑动门，代码如下：header.js， headTabBar.css, nvTabpage.jsp；nvTabpage.jsp是个网页头，希望能像tabpage一样，下面根据所点的进行显示需要的内容。可是一直图片不能跟着改变，下面修改了红色的代码之后，问题解决，保存下来收藏。^_^!!! param1是外面jsp 用include 调用的参数。 nvTabpag
微信滑动门小案例
咖啡杯里的茶
03-11 442
先看一下微信官顶部样式 上面的首页，帮助与反馈等样式都是由背景图片实现的，至于为什么需要用到滑动的知识是因为每一个链接里面的字数是不一样的，也就是说这些字外面的框应该是根据内容的多少自动扩展，所以需要使用到滑动的方式。 滑动原理 虽说是滑动，但是实际上底部依然只是一张背景图片，只是可以将这个背景图片看做是两部分，第一部分就是左边的那个半圆部分，第二部分就是后面半圆以及矩形部分。左侧半圆固定，当字...
基于JQuery的Tab滑动门插件实现代码
Tab 滑动门代码是一个基于 jQuery 的插件，用于实现 tab 切换效果。该插件提供了多个参数可供配置，以满足不同的需求。下面将对该插件的知识点进行详细解释。 **插件作者和版权信息** 该插件的作者是 Maowl，基于 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值