首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

Posted in Javascript onSeptember 14, 2015

本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果。分享给大家供大家参考。具体如下：

这里汇总了几个Tab，滑动门，选项卡，图片切换，在一个网页中实现了超多的常用效果，大家喜欢的滑动门，焦点图切换，标签选项卡以及文字轮番等都集中在了一起，无聊的功劳，忙的时候还顾不上写，另外还加入了圆角，都是参考以前学习的知识写的。期间使用了jquery-1.6.2.min.js框架库。

运行效果截图如下：

jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

在线演示地址如下：

具体代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tab</title>
<style>
html body  {margin:0px; padding:0px;}
.t_body{border:1px solid #ddd; padding:10px; width:250px; margin:50px;float:left;}
.aa {background-color:#eee; width:25px; cursor:pointer; float:left; margin-left:10px; text-align:center;}
.bb {background-color:#eae; width:250px; height:250px; display:none; font-size:50px;}
.cc {background-color:#eee; width:100%; height:20px; display:none;}
.on {background-color:#c21; width:30px; border-bottom:0px; border-top:0px;}
.yuan1 span {display: block;overflow: hidden;height: 1px; border-color:#77a;} 
.yuan2 span {display: block;overflow: hidden;height: 1px; border-color:#77a;} 
.span1 {margin:0px 3px; background-color:#77a;}
.span2 {margin:0px 1px; border-left:2px solid; border-right:2px solid;}
.span3 {margin:0px 1px; border-left:1px solid; border-right:1px solid;}
.d_body {margin:50px;width:400px; height:400px; font-size:12px;float:left;}
.d_top {height:40px; border-left:1px solid #77a; border-right:1px solid #77a;}
.d_t {float:left; margin-top:7px; margin-left:10px; border:1px solid #77a; width:100px; height:31px; line-height:31px; background-color:#eee;}
.d_t a {color:#555; text-decoration:none;}
.d_t a:hover {color:#933; text-decoration:underline; font-weight:bold; }
.d_main {border:1px solid #77a; border-top:0px; height:300px;}
.ln  {position:relative; border-bottom:1px solid #77a; top:40px; z-index:-1;}
.bbb  {background-color:#fff; height:100%; display:none; margin:10px;}
.on1 {border-bottom:1px solid #fff; background-color:#fff;}
.fl  {float:left;}
.clr {clear:both;}
.of  {overflow:hidden;}
.textcenter{text-align:center;vertical-align:middle;}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
 /*
  o1: 标签元素
  o2: 内容元素
  c : 标签元素显示用样式
  e : 触发事件 如 click mouseover 
 */
 function tab1(o1,o2,c,e){
  o1.each(function(i){
   $(this).bind(e,function(){
    o2.hide().eq(i).show();
    o1.removeClass(c);
    $(this).addClass(c);
   })
   if ($(this).hasClass(c)) {
    $(this).addClass(c);
    o2.hide().eq(i).show();
   }
  })
 }
 /*
  o1: 标签元素
  o2: 内容元素
  c : 标签元素显示用样式
  t1: 标签切换时间
  t2: 内容渐进时间
  a : 内容渐进起始半透明度 0.1~1
  b : 内容渐进结束半透明度 0.1~1
 */
 function tab2(o1,o2,c,t1,t2,a,b){
  var count=o1.size()-1;
  var now;
  var TimeInterval;
  o1.each(function(i){
   $(this).mouseover(function(){
    o2.hide().eq(i).show();
    o1.removeClass(c);
    $(this).addClass(c);
    window.clearInterval(TimeInterval);
   }).mouseout(function(){
    now = i+1;
    TimeInterval = window.setInterval(changeimage,t1);
   });
   //初始化显示
   if ($(this).hasClass(c)) {
    $(this).addClass(c);
    o2.hide().eq(i).show();
    now = i+1;
   }
  })
  TimeInterval = window.setInterval(changeimage,t1);
  function changeimage(){
   if(now>count)now=0;
   o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
   o1.removeClass(c).eq(now).addClass(c);
   now++;
  }
 }
 /*
  o1: 标签元素
  o2: 内容元素
  o3: 内容元素
  c : 标签元素显示用样式
  e : 触发事件 如 click mouseover 
 */
 function tab3(o1,o2,o3,c,e){
  o1.each(function(i){
   $(this).bind(e,function(){
    o2.hide().eq(i).show();
    o3.hide().eq(i).show();
    o1.removeClass(c);
    $(this).addClass(c);
   })
   if ($(this).hasClass(c)) {
    $(this).addClass(c);
    o2.hide().eq(i).show();
    o3.hide().eq(i).show();
   }
  })
 }
 /*
  o1: 标签元素
  o2: 内容元素
  o3: 内容元素
  c : 标签元素显示用样式
  t1: 标签切换时间
  t2: 内容渐进时间
  a : 内容渐进起始半透明度 0.1~1
  b : 内容渐进结束半透明度 0.1~1
 */
 function tab4(o1,o2,o3,c,t1,t2,a,b){
  var count=o1.size()-1;
  var now;
  var TimeInterval;
  o1.each(function(i){
   $(this).mouseover(function(){
    o2.hide().eq(i).show();
    o3.hide().eq(i).show();
    o1.removeClass(c);
    $(this).addClass(c);
    window.clearInterval(TimeInterval);
   }).mouseout(function(){
    now = i+1;
    TimeInterval = window.setInterval(changeimage,t1);
   });
   //初始化显示
   if ($(this).hasClass(c)) {
    $(this).addClass(c);
    o2.hide().eq(i).show();
    o3.hide().eq(i).show();
    now = i+1;
   }
  })
  TimeInterval = window.setInterval(changeimage,t1);
  function changeimage(){
   if(now>count)now=0;
   o3.hide().eq(now).show();
   o2.hide().eq(now).stop().fadeTo(0,a).fadeTo(t2,b);
   o1.removeClass(c).eq(now).addClass(c);
   now++;
  }
 }
 //调用函数
 tab1($(".yuan1 .d_t"),$(".yuan1 .bbb"),"on1","mouseover");
 tab1($(".yuan2 .d_t"),$(".yuan2 .bbb"),"on1","click");
 tab1($(".d0 .aa"),$(".d0 .bb"),"on","click");
 tab1($(".d1 .aa"),$(".d1 .bb"),"on","mouseover");
 tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
 tab3($(".d3 .aa"),$(".d3 .bb"),$(".d3 .cc"),"on","mouseover");
 tab4($(".d4 .aa"),$(".d4 .bb"),$(".d4 .cc"),"on",1500,800,0.1,1);
 tab4($(".d5 .aa"),$(".d5 .bb"),$(".d5 .cc"),"on",1500,0,1,1);
});
</script>
</head>
<body>
<div class="d_body yuan1">
 <div>鼠标悬浮切换</div><br>
 <span class="span1"></span><span class="span2"></span><span class="span3"></span>
 <div class="d_top">
  <div class="ln"></div>
  <div class="d_t textcenter on1">
   <a href="javascript:">第一个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第二个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第三个标签</a>
  </div>
 </div>
 <div class="d_main clr of">
  <div class="bbb"><font color="blue">第一个内容</font></div>
  <div class="bbb"><font color="red">第二个内容</font></div>
  <div class="bbb"><font color="black">第三个内容</font></div>
 </div>
 <div class="clr of"></div>
</div>
<div class="d_body yuan2">
 <div>点击切换</div><br>
 <span class="span1"></span><span class="span2"></span><span class="span3"></span>
 <div class="d_top">
  <div class="ln"></div>
  <div class="d_t textcenter on1">
   <a href="javascript:">第一个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第二个标签</a>
  </div>
  <div class="d_t textcenter">
   <a href="javascript:">第三个标签</a>
  </div>
 </div>
 <div class="d_main clr of">
  <div class="bb"><font color="blue">第一个内容</font></div>
  <div class="bb"><font color="red">第二个内容</font></div>
  <div class="bb"><font color="black">第三个内容</font></div>
 </div>
 <div class="clr of"></div>
</div>
<div class="t_body d0">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">点击切换</div>
 <div class="bb">4</div>
 <div class="bb">5</div> 
<div style="clear:both;"></div>
</div>
<div class="t_body d1">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">3</div>
 <div class="bb">4</div>
 <div class="bb">5</div> 
<div style="clear:both;"></div>
</div>
<div class="t_body d2">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">3</div>
 <div class="bb">4</div>
 <div class="bb">5</div> 
<div style="clear:both;"></div>
</div>
<div class="t_body d3">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">悬浮切换</div>
 <div class="bb">4</div>
 <div class="bb">5</div>
 <div class="cc">111111</div>
 <div class="cc">222222</div>
 <div class="cc">333333</div>
 <div class="cc">444444</div>
 <div class="cc">555555</div> 
<div style="clear:both;"></div>
</div>
<div class="t_body d4">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">3</div>
 <div class="bb">4</div>
 <div class="bb">5</div>
 <div class="cc">111111</div>
 <div class="cc">222222</div>
 <div class="cc">333333</div>
 <div class="cc">444444</div>
 <div class="cc">555555</div> 
<div style="clear:both;"></div>
</div>
<div class="t_body d5">
 <div class="aa">a</div>
 <div class="aa">b</div>
 <div class="aa on">c</div>
 <div class="aa">d</div>
 <div class="aa">e</div><br>
 <div class="bb">1</div>
 <div class="bb">2</div>
 <div class="bb">3</div>
 <div class="bb">4</div>
 <div class="bb">5</div>
 <div class="cc">111111</div>
 <div class="cc">222222</div>
 <div class="cc">333333</div>
 <div class="cc">444444</div>
 <div class="cc">555555</div> 
<div style="clear:both;"></div>
</div>
</body>
</html>

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

jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法
Jun 04 Javascript
简单了解JavaScript arguement原理及作用
May 28 Javascript
React中的Context应用场景分析
Jun 11 Javascript
vue router 动态路由清除方式
May 25 Vue.js
JS+DIV+CSS实现的经典标签切换效果代码
Sep 14 #Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 #Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 #Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
mp3Play(1) Tkinter(4) pandas(7) apply(1) GUI(2) 数据处理(2) 矩阵(1) agg(1) Pool(1) 音频(1)
You might like
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
PHP常用数组函数介绍
2014/07/28 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
php服务器的系统详解
2019/10/12 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
jquery弹出框的用法示例(2)
2013/08/26 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
ES6中Proxy代理用法实例浅析
2017/04/06 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[06:07]刀塔密之二：攻之吾命受之吾幸
2014/07/03 DOTA
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
简单实现python数独游戏
2018/03/30 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
django中的数据库迁移的实现
2020/03/16 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
英国人最爱的饰品网站：Accessorize
2016/08/22 全球购物
Melijoe英国官网：法国儿童时尚网站
2016/11/18 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
什么是方法的重载
2013/06/24 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
作文批改评语大全
2014/04/23 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
python之django路由和视图案例教程
2021/07/26 Python