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 相关文章推荐
jquery 页面全选框实践代码
Apr 02 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
Apr 16 Javascript
jQuery 文本框得失焦点的简单实例
Feb 19 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
Mar 09 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Vue computed 计算属性代码实例
Apr 22 Javascript
vue 限制input只能输入正数的操作
Aug 05 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
关于Sphinx创建全文检索的索引介绍
2013/06/25 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
用javascript读取xml文件读取节点数据
2014/08/12 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解在AngularJS的controller外部直接获取$scope
2017/06/02 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017/07/10 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
Python3调用微信企业号API发送文本消息代码示例
2017/11/10 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python使用jupyter notebook查看ipynb文件过程解析
2020/06/02 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
宣传策划类求职信范文
2014/01/31 职场文书
军训学生自我鉴定
2014/02/12 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
小学优秀教师材料
2014/12/15 职场文书
河童之夏观后感
2015/06/11 职场文书
部门主管竞聘书
2015/09/15 职场文书
2016年情人节广告语
2016/01/28 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
Python控制台输出俄罗斯方块的方法实例
2021/04/17 Python
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android
 Redis 串行生成顺序编码的方法实现
2022/04/03 Redis