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如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
Apr 20 Javascript
编程语言JavaScript简介
Oct 16 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
layui弹出层按钮提交iframe表单的方法
Aug 20 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 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实现读取和编写XML DOM代码
2010/04/07 PHP
php编写一个简单的路由类
2011/04/13 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
yii2实现 &quot;上一篇,下一篇&quot; 功能的代码实例
2017/02/04 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
JS中实现函数return多个返回值的实例
2017/02/21 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
微信小程序支付功能 php后台对接完整代码分享
2018/06/12 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
解决python replace函数替换无效问题
2020/01/18 Python
opencv+python实现均值滤波
2020/02/19 Python
广州盈通面试题
2015/12/05 面试题
关爱留守儿童捐款倡议书
2015/04/27 职场文书
2015年度物流工作总结
2015/04/30 职场文书
员工表扬信怎么写
2015/05/05 职场文书
晚会主持人开场白台词
2015/05/28 职场文书
公司董事任命书
2015/09/21 职场文书
任命书格式范文
2015/09/22 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
python 如何用terminal输入参数
2021/05/25 Python
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Django rest framework如何自定义用户表
2021/06/09 Python
python程序的组织结构详解
2021/12/06 Python