jquery鼠标点击选项卡 鼠标滑过选项卡插件


jquery鼠标点击选项卡 鼠标滑过选项卡插件
jquery鼠标点击选项卡 鼠标滑过选项卡插件以及鼠标点击选项卡、鼠标滑过等js/jquery网页特效代码下载。

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体";}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
/* demo */
.demo{width:686px;margin:40px auto;position:relative;}
.demo h2{font-size:16px;height:44px;color:#3366cc;margin-top:20px;}
.demo dl dt{font-size:14px;color:#ff6600;margin-top:30px;font-weight:800;}
.demo dl dt,.demo dl dd{line-height:22px;}
/* tabbtn */
.tabbtn{height:30px;background:url(images/tabbg.gif) repeat-x;border-left:solid 1px #ddd;border-right:solid 1px #ddd;}
.tabbtn li{float:left;position:relative;margin:0 0 0 -1px;}
.tabbtn li a{display:block;float:left;height:30px;line-height:30px;overflow:hidden;width:108px;text-align:center;font-size:12px;cursor:pointer;}
.tabbtn li.current{border-left:solid 1px #d5d5d5;border-right:solid 1px #d5d5d5;border-top:solid 1px #c5c5c5;}
.tabbtn li.current a{border-top:solid 2px #ff6600;height:27px;line-height:27px;background:#fff;color:#3366cc;font-weight:800;}
/* tabcon */
.tabcon{border-width:0 1px 1px 1px;border-color:#ddd;border-style:solid;position:relative;/*必要元素*/height:180px;overflow:hidden;}
.tabcon .subbox{position:absolute;/*必要元素*/left:0;top:0;}
.tabcon .sublist{padding:5px 10px;height:170px;}
/* leftcon */
#leftcon .subbox{width:9999em;}
#leftcon .subbox .sublist{float:left;width:664px;}
/* sublist */
.sublist{padding:10px;}
.sublist li{height:28px;line-height:28px;font-size:12px;}
.sublist li span{margin:0 5px 0 0;font-family:"宋体";font-size:12px;font-weight:400;color:#ddd;}
</style>
<div class="demo">	
	<h2>实例1、上下滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-top">
		<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="topcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	<h2>实例2、左右滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-left">
		<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="leftcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	<h2>实例3、淡隐淡现选项卡切换</h2>
	<ul class="tabbtn" id="fadetab">
		<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="fadecon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	<h2>实例4、默认选项卡切换</h2>
	<ul class="tabbtn" id="normaltab">
		<li class="current"><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
		<li><a href="https://www.51qianduan.com/" target="_blank">51前端</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="normalcon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.51qianduan.com/" target="_blank">jquery progress bar进度条插件,投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	<dl>
		<dt>应用说明:</dt>
		<dd>* 应用对象必须为标签按钮的直接父元素,且父元素内不包含其他非按钮元素</dd>
		<dd>* example: 
<pre>
$( ".menus_wrap" ).tabso({
	cntSelect:".content_wrap",
	tabEvent:"mouseover" 
});
</pre>
		</dd>
		<dd>* cntSelect:内容块的直接父元素的 jq 选择器</dd>
		<dd>* tabEvent:触发事件名</dd>
		<dd>* tabStyle:切换方式。可取值:"normal" "fade" "move" "move-fade" "move-animate"</dd>
		<dd>* direction:移动方向。可取值:"left" "top" (tabStyle为"move"或"move-fade" "move-animate"时有效)</dd>
		<dd>* aniMethod:动画方法(特殊效果需插件(如:easing)支持,tabStyle为"move-animate"时有效)</dd>
		<dd>* aniSpeed:动画速度</dd>
		<dd>* onStyle:菜单选中样式名</dd>
	</dl>
</div><!--tabbox end-->
<script type="text/javascript">
$(document).ready(function($){
	//上下滑动选项卡切换
	$("#move-animate-top").tabso({
		cntSelect:"#topcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "top"
	});
	//左右滑动选项卡切换
	$("#move-animate-left").tabso({
		cntSelect:"#leftcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "left"
	});
	//淡隐淡现选项卡切换
	$("#fadetab").tabso({
		cntSelect:"#fadecon",
		tabEvent:"mouseover",
		tabStyle:"fade"
	});
	//默认选项卡切换
	$("#normaltab").tabso({
		cntSelect:"#normalcon",
		tabEvent:"mouseover",
		tabStyle:"normal"
	});
});
</script>

相关推荐

发表评论

相关文章