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 this关键字使用分析
Oct 21 Javascript
jQuery性能优化28条建议你值得借鉴
Feb 16 Javascript
js单词形式的运算符
May 06 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
Sep 29 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
微信小程序地图实现展示线路
Jul 29 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作的文本留言本的例子(四)
2006/10/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
Prototype Number对象 学习
2009/07/19 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
用javascript实现倒计时效果
2021/02/09 Javascript
python数据结构之链表的实例讲解
2017/07/25 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Django中自定义查询对象的具体使用
2019/10/13 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
Pycharm中配置远程Docker运行环境的教程图解
2020/06/11 Python
Python 可视化神器Plotly详解
2020/12/26 Python
英国评分最高的女性剃须刀订阅盒:FFS Beauty
2018/01/25 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
高中毕业自我鉴定
2013/12/16 职场文书
大学生自助营养快餐店创业计划书
2014/01/13 职场文书
十佳护士先进事迹
2014/05/08 职场文书
财务管理专业自荐书
2014/09/02 职场文书
离婚案件答辩状
2015/05/22 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js