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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
Aug 05 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
JavaScript中eval()函数用法详解
Dec 14 Javascript
灵活使用数组制作图片切换js实现
Jul 28 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
JS实现页面鼠标点击出现图片特效
Aug 19 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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制作的意见反馈表源码
2007/03/11 PHP
php实现图片添加水印功能
2014/02/13 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
JS查看对象功能代码
2008/04/25 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
JS打印组合功能
2016/08/04 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
[01:11:10]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG加赛
2014/05/26 DOTA
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
python实现聚类算法原理
2018/02/12 Python
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
Python装饰器结合递归原理解析
2020/07/02 Python
python实现磁盘日志清理的示例
2020/11/05 Python
耐克亚太地区:Nike APAC
2019/12/07 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
明信片寄语大全
2014/04/08 职场文书
化学专业自荐信
2014/05/28 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
体育部部长竞选稿
2015/11/21 职场文书
导游词之安徽九华山
2019/09/18 职场文书