js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > js选项卡

jquery鼠标滑过标签选项卡切换特效

发布时间:2015-08-30 13:59:13    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jquery鼠标滑过标签选项卡切换特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jquery鼠标滑过标签选项卡切换特效</title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" language="javascript">
			$(function () {

				$("#khxgd").css({ "z-index": "10" });
				$("#kmtbd").css({ "z-index": "9" });

				$('.xxktit li').hover(function () {
					var thisId = $(this).attr("id");
					$(".kinfo").not($("#k" + thisId)).animate({ opacity: 0 }, 300);
					$(".kinfo").not($("#k" + thisId)).css({ "z-index": "0" });
					$(this).addClass("cur");
					$("#k" + thisId).stop(true, true).animate({ opacity: 1.0 }, 300);
					$("#k" + thisId).css({ "z-index": "10" });
				}, function () {
					var thisId = $(this).attr("id");
					$(this).removeClass("cur");
				});
			});
		</script>
	</head>
	<body>
		<div class="xxk">
			<div class="xxktit">
				<ul>
					<li id="hxgd"><a href="#">泓信观点</a></li>
					<li id="mtbd"><a href="#">媒体报道</a></li>
				</ul>
			</div>
			<div id="khxgd" class="kinfo">
				<ul>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">裘国根:“沪港通”与资本市场改革 </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">25<span>09</span></div>
						<div class="clear"></div>
					</li>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">裘国根:“沪港通”与资本市场改革 </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">25<span>09</span></div>
						<div class="clear"></div>
					</li>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">裘国根:“沪港通”与资本市场改革 </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">25<span>09</span></div>
						<div class="clear"></div>
					</li>
				</ul>
			</div>
			<div id="kmtbd" class="kinfo">
				<ul>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">标识创意源于水纹东南部,方形代表专业... </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">05<span>09</span></div>
						<div class="clear"></div>
					</li>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">标识创意源于水纹东南部,方形代表专业... </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">05<span>09</span></div>
						<div class="clear"></div>
					</li>
					<li>
						<div class="main1_r_l">
							<div class="main1_r_bt"><a href="http://www.jstxdm.com">标识创意源于水纹东南部,方形代表专业... </a> </div>
							<div class="main1_r_nr">本文为重阳投资董事长裘国根在近期中国金融四十人“山东论坛”暨“深化经济体制改革的几个重点领域”内部研讨会上的发言,由中国金融四十人论...</div>
						</div>
						<div class="main1_r_r">05<span>09</span></div>
						<div class="clear"></div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>



jquery 标签 选项卡

jQuery左侧分类导航特效_jquery商城左侧分类菜单导航_橙色导航菜单特效代码

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery带缩略图焦点滚动图特效代码

仿红木之家官网首页jquery焦点全屏大图切换特效

jQuery二级图文平滑下拉菜单特效代码

jquery顶部导航菜单下拉,左侧分类切换特效

jQuery实现固定顶部导航,点触全屏滚动特效代码

jQuery仿腾讯云全屏下拉导航菜单特效代码

一款jQuery跨平台并且带触摸移动端焦点图特效

jQuery四屏焦点图网站特效代码

jquery双重切换的tab选项卡特效代码

jquery仿360音乐搜索主页歌手切换选项卡特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jquery SuperSlide仿京东首页促销产品tab选项卡切换特效

jquery图片相册特效,切换上下页,还带对话框提醒特效

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

jQuery右侧浮动客服特效,点击弹出窗口显示更多在线QQ客服

仿OPPO官方商城jquery焦点图特效

jquery绿色的按栏目下拉,信息搜索输入框特效代码

jQuery标签输入特效,自带删除标签功能

jquery实现网页右下角弹出并且支持tab标签选项卡的图片广告代码

JS鼠标滑过文字标签改变标签显示内容

jquery.caroufredsel按钮控制图片滚动,点击标签分类筛选特效

jquery实现在输入框回车添加标签特效

jquery实现文字标签滑动显示特效,带标签数量

js实现球形滚动标签云文字特效代码

jQuery实现tab选项卡标签自动切换特效

jquery实现鼠标悬停图片突出显示大图,另外带标签关键词功能

jQuery实现带标签选项卡图片左右切换特效代码

jquery实现彩色标签图片tab选项卡滑动切换特效代码

jQuery Tagbox插件实现快速添加标签特效代码

js自适应宽度的标签导航

横向(纵向)时间轴tab标签切换和水平(垂直)切换幻灯片效果 demo1# 横向滚动

js flash 实现标签风格焦点图幻灯片轮换特效代码

js实现可暂定、可以开始、自动滚动的TAB标签特效代码

jQuery tab标签选项卡切换特效代码带缩略图列表效果

友荐云推荐
大家说 此评论不代表本站观点