jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果


Posted in Javascript onAugust 25, 2015

本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果。分享给大家供大家参考。具体如下:

这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧。

运行效果截图如下:

jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab选项卡切换</title>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/tytabs.jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
 $("#tabsholder").tytabs({
  tabinit:"2",
  fadespeed:"fast"
 });
 $("#tabsholder2").tytabs({
  prefixtabs:"tabz",
  prefixcontent:"contentz",
  classcontent:"tabscontent",
  tabinit:"3",
  catchget:"tab2",
  fadespeed:"normal"
 });
});
-->
</script>
<style>
*{padding: 0;margin: 0;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 12px;}
html, body{background-color: #2f2f2f;color: #eaeaea;}
img{border: none;}
.center{width: 400px;margin-left: auto;margin-right: auto;}
.centerText{text-align: center;}
a{color: #baee00;text-decoration: none;}
a: link{color: #baee00;}
a: visited{color: #baee00;}
a: hover{color: #baee00;text-decoration: underline;}
a: active{color: #baee00;}
.center{width: 60%;margin: 20px auto 0 auto;}
.marginbot{margin-bottom: 15px;}
ul.list li{list-style-type: none;margin-left: 20px;}
ul.tabs{width: 100%;overflow: hidden;}
ul.tabs li{list-style-type: none;display: block;float: left;color: #fff;padding: 8px;margin-right: 2px;border-bottom: 2px solid #2f2f2f;background-color: #1f5e6f;-moz-border-radius: 4px 4px 0 0;-webkit-border-radius: 4px 4px 0 0;cursor: pointer;}
ul.tabs li: hover{background-color: #43b0ce;}
ul.tabs li.current{border-bottom: 2px solid #43b0ce;background-color: #43b0ce;padding: 8px;}
.tabscontent{border-top: 2px solid #43b0ce;padding: 8px 0 0 0;display: none;width: 100%;text-align: justify;}
</style>
</head>
<body>
<div class="center">
 <p> </p>
 <!-- Tabs -->
 <div id="tabsholder">
 <ul class="tabs">
  <li id="tab1">Spiderman</li>
  <li id="tab2">Batman</li>
  <li id="tab3">Hulk</li>
  <li id="tab4">Daredevil</li>
 </ul>
 <div class="contents marginbot">
  <div id="content1" class="tabscontent">
  三水点靠木(3water.com)提供脚本源码、编程源码、网站源码、网页素材、书籍教程、网站模板、网页特效代码等,做有质量的学习型源码下载站。
  </div>
  <div id="content2" class="tabscontent">
  Donec eu velit ante, non dapibus nibh. Praesent condimentum ipsum eu ligula elementum pretium. Nullam vel mi odio, non tincidunt lorem. Etiam pulvinar eleifend velit non ornare. Etiam neque ante, posuere vitae bibendum ac, varius non augue. Sed cursus commodo dapibus. Nullam sed feugiat dolor. Praesent interdum elementum scelerisque. Etiam tincidunt lectus et nulla suscipit ut scelerisque elit egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
  </div>
  <div id="content3" class="tabscontent">
HTML5技术结合jquery实现的自动生成缩略图程序,生成后排成一行,类似图片墙的效果,所以可以用在图片墙的效果中,HTML5效果也..一个html5实现的显示百分比的简洁漂亮的进度条特效,没有使用图片,HTML5超漂亮进度条特效代码,相信你会喜欢的。用到了HTML5..HTML5登录界面模板,jQuery+CSS3实现了超炫的外发光火焰特效,表单文本框带有默认文字效果,可作为一个管理员登录界面模板来完.CSS3多级导航菜单,图标菜单,圆角菜单,CSS3了不得啊,不知道一点貌似要OUT了,搞前端的更不能不看了。因为CSS3的每一款东西..
   </div>
  <div id="content4" class="tabscontent">
   一个绝对不容错过的CSS3特效,收集了90款漂亮的CSS3按钮样式集,全部通过样式定义的50个圆角渐变效果的网页按钮,红、黄、蓝、.
   </div>
 </div>
 </div>
 <!-- /Tabs -->
 <!-- Tabs2 -->
 <div id="tabsholder2">
 <ul class="tabs">
  <li id="tabz1">Captain America</li>
  <li id="tabz2">X-men</li>
  <li id="tabz3">Iron man</li>
  <li id="tabz4">Fantastic Four</li>
 </ul>
 <div class="contents marginbot">
  <div id="contentz1" class="tabscontent">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In vel sem risus. Aenean vulputate, dui quis dignissim scelerisque, magna justo dapibus diam, a luctus justo lectus non orci. Donec aliquam risus sed nisl vulputate volutpat. Etiam molestie erat quis augue lobortis volutpat. Curabitur a tortor arcu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc hendrerit malesuada luctus. Proin at tellus feugiat nisl gravida blandit in nec erat. Sed varius, neque sit amet scelerisque vestibulum, augue eros hendrerit sapien, non imperdiet est ante in ipsum. Suspendisse ornare metus et velit rhoncus sodales
   </div>
  <div id="contentz2" class="tabscontent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ante arcu, lacinia quis varius vel, pharetra eu sapien. Nulla dictum tincidunt nunc gravida congue. Quisque scelerisque, nulla ut sollicitudin lobortis, urna neque dapibus sem, quis congue tellus purus id nibh. Pellentesque congue massa ac quam rhoncus posuere.
  </div>
  <div id="contentz3" class="tabscontent">
  jquery实现的自动生成缩略图程序,生成后排成一行,类似图片墙的效果,所以可以用在图片墙的效果中,HTML5效果也..一个html5实现的显示百分比的简洁漂亮的进度条特效,没有使用图片,HTML5超漂亮进度条特效代码,相信你会喜欢的。
  </div>
  <div id="contentz4" class="tabscontent">
  Nam sed tellus metus. Nunc sem neque, mollis ac tempor sed, rhoncus vitae orci. Praesent vel tellus in felis condimentum ultrices eget at lectus. Donec aliquam, nunc et feugiat sagittis, nulla metus scelerisque risus, in eleifend magna diam vitae turpis. Proin cursus sagittis tellus sed iaculis. Nam tincidunt, augue ornare posuere dignissim, tellus velit vehicula massa, eu molestie ipsum quam sit amet nibh. Curabitur semper auctor leo eu elementum.
  </div>
 </div>
 </div>
 <!-- /Tabs2 -->
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
11款基于Javascript的文件管理器
Oct 25 Javascript
关于this和self的使用说明
Aug 01 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
Aug 01 Javascript
Vue 2.x教程之基础API
Mar 06 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
js文本框走动跑马灯效果代码分享
Aug 25 #Javascript
jQuery实现图片左右滚动特效
Apr 20 #Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 #Javascript
jquery图片滚动放大代码分享(1)
Aug 25 #Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 #Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 #Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 #Javascript
You might like
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php批量修改表结构实例
2017/05/24 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
python异常和文件处理机制详解
2016/07/19 Python
Python中的连接符(+、+=)示例详解
2017/01/13 Python
python使用matplotlib库生成随机漫步图
2018/08/27 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
在python中对变量判断是否为None的三种方法总结
2019/01/23 Python
python 多个参数不为空校验方法
2019/02/14 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
浅析python 字典嵌套
2020/09/29 Python
python装饰器代码深入讲解
2021/03/01 Python
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
社会治安综合治理管理责任书
2014/04/16 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
宇宙与人观后感
2015/06/05 职场文书
爱的教育读书笔记
2015/06/26 职场文书