几个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="http://www.codefans.net/ajaxjs/jquery-1.4.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>
几个Tab，滑动门，选项卡，图片切换的更多相关文章
- 代码简洁的滑动门（tab）jquery插件
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- 【Little Demo】左右按钮tab选项卡双切换
通过前一篇文章 从简单的Tab标签到Tab图片切换 的说明,相关效果也就可以实现了. 1.左右按钮tab选项卡双切换 很明显,左右两个按钮是 absolute 布局,另外就是内容部分和Tab标签部分. ...
- 【Little Demo】从简单的Tab标签到Tab图片切换
Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...
- JS切割图片-滑动门效果
转载请注明来源:https://www.cnblogs.com/hookjc/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- Javascript学习笔记2.2 Javascript与DOM选项卡（滑动门）案例详解
学习了DOM的知识,今天开始做些练习,想到了一个网页滑动门的特效,见下图: 1.通过建立索引实现 <!doctype html> <html> <head> < ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- 基于HTML5 Tab选项卡动画切换特效
基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- 手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 制作四个选项卡页 Tab，用户可以通过切换不同的 Tab 页查看不同类别的新闻信息，每个 Tab 有对应的内容版块，点击某个选项卡时，显示对应的内容版块，隐藏其他内容版块，并且为了突出当前的选项卡，还
查看本章节 查看作业目录 需求说明: 制作四个选项卡页 Tab,用户可以通过切换不同的 Tab 页查看不同类别的新闻信息,每个 Tab 有对应的内容版块,点击某个选项卡时,显示对应的内容版块,隐藏其他 ...
- 移动web：图片切换(焦点图)
在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...
随机推荐
- 【ERROR】bash: vim: command not found的解决办法
今天在学习鸟哥的菜的时候,发现自己linux不可以启用vim命令,错误为:bash: vim: command not found. 机器环境:VMWare8+RED HAT Enterprise5 ...
- 标准I/O库
前言:我想大家学习C语言接触过的第一个函数应该是printf,但是我们真正理解它了吗?最近看Linux以及网络编程这块,我觉得I/O这块很难理解.以前从来没认识到Unix I/O和C标准库I/O函数压 ...
- Android IPC机制（三）在Android Studio中使用AIDL实现跨进程方法调用
在上一篇文章Android IPC机制(二)用Messenger进行进程间通信中我们介绍了使用Messenger来进行进程间通信的方法.可是我们能发现Messenger是以串行的方式来处理client ...
- MySQL Proxy 实现 MySQL 读写分离提高并发负载
还在学习,学完了在写笔记 (这个先安装lua:https://www.cnblogs.com/fps2tao/p/9163959.html ) 工作拓扑: MySQL Proxy有一项强大功能是实现“ ...
- webservice快速入门-使用wsimport生成ws服务端（二）
上个例子演示的是在当前项目下发布的Webservice Server,而实际应用中和Client是分离的,本文介绍两种客户端开发方式: 1.导出WebService服务端服务接口到jar包,客户端引入 ...
- WCF transport-and-message-security
Things to Consider When Implementing a Load Balancer with WCF https://msdn.microsoft.com/library/hh2 ...
- angular学习笔记(五)-阶乘计算实例(3)
同样是上一个例子,我们要求并非实时的计算结果,而是等到用户确定自己已经输入完毕,然后进行计算: <!DOCTYPE html> <html ng-app> <head&g ...
- bazel-编译静态库
demo3 使用bazel编译静态库 demo3目录树 ├── README.md ├── static │ ├── BUILD │ ├── static.c │ └── static.h └── W ...
- 【转】32位和64位系统区别及int字节数
http://blog.csdn.net/zhongzhiwei/article/details/8678885 一)64位系统和32位有什么区别? 1.64bit CPU拥有更大的寻址能力,最大支持 ...
- 使用TortoiseGit操作分支的创建与合并功能集合
使用TortoiseGit操作分支的创建与合并 本文在介绍了软件安装和设置后, 写了TortoiseGit 常用的一些功能, 包括: 创建新库 添加文件及文件夹 创建分支 看分支情况及修改log 比较 ...