论坛首页 → Web前端技术论坛 →

tab选框集合

浏览 4173 次
锁定老帖子 主题：tab选框集合
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
作者 正文
  • happysoul
  • 等级: 一星会员
  • 性别:
  • 文章: 321
  • 积分: 100
  • 来自: 天津
   发表时间：2011-03-19   最后修改：2011-03-19
圆角参考了经典论坛中坛友建议，把原来用的<u>换成了 <span>其实原理还是差不多的

淡入淡出的效果是更新网站时候的需求。。没有办法 只好实现了。。。

最开始图省事做的仿163切换的太简易了，后来扩充了一些东西，抛砖作为一个写的思路
有的代码重用性很大，完全可以把相同功能的写成函数，不要一遍一遍的再每一个页面都写上一堆一堆的<script>代码，太乱 而且管理也不方便

最后面的例子只是提供了一个扩充的思路。比如焦点图需要大图，小图，还有文字描述
具体样式就需要美工们自己去设计了！




这个是套用了tab2方法实现的
实现思路，需要最外层一个div，左侧大图浮动居左，初始时display:none;
右侧四个小图浮动居右
对于tab2传入值：
tab2($(".d2 .aa"),$(".d2 .bb"),"on",1500,800,0.1,1);
.d2是最外层div的class .bb是每个图片外的class .aa是右侧小图对应的class
on为小图的特殊样式--选中时
1500: 标签切换时间
800: 图片淡入时间
0.1: 内容渐进起始半透明度
   1: 内容渐进结束半透明度

页面中需要多个的时候只需要修改 .d2 只要能保证每个焦点图外层的class是唯一的就行
或者使用id的选择器指定div

必须文件为jquery.js 版本理论上1.4.2就好，1.3.2无淡入淡出效果 



<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://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.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++;
		}
	}

/*	[color=red]代码会执行，所以只能注释掉！运行的时候记得把这里的注释去掉[/color]
	//调用函数
	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="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="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>
  • 大小: 13.4 KB
  • 大小: 40 KB
返回顶楼
         
  • lxtx517
  • 等级: 初级会员
  • 性别:
  • 文章: 4
  • 积分: 30
  • 来自: 成都
   发表时间：2011-03-21  
很早就是span了啊
返回顶楼
          回帖地址
0 请登录后投票
  • yuqihui
  • 等级: 初级会员
  • 性别:
  • 文章: 10
  • 积分: 0
  • 来自: 深圳
   发表时间：2011-04-09  
为什么在firefox不能用呢
返回顶楼
          回帖地址
0 请登录后投票
  • pywepe
  • 等级: 初级会员
  • 性别:
  • 文章: 75
  • 积分: 40
  • 来自: 厦门
   发表时间：2011-04-11  
想把你这个封装成 jsp tag
可是...
我慢慢弄
返回顶楼
          回帖地址
0 请登录后投票
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics