jquery css3 animation属性仿360音乐首页动画选项卡切换代码



95 376 126



特效描述:音乐首页动画 选项卡切换,tab切换,兼容ie6,点击对应不同的区域内容,纯手写,大神勿喷。

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<!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>360音乐歌手切换jQuery选项卡</title>
</head>
<body style="background:#333;">   
<div class="top-vrank" id="artists">
	<div class="mod-hd">
		<h3>热门上榜歌手</h3>
		<ul class="tabs">
			<li data-type="www.dijiuzhanzhang.com" class="first active"><a href="javascript:void(0);" hidefocus="true"><span>内地</span></a></li>
			<li data-type="www.dijiuzhanzhang.com"><a href="javascript:void(0);" hidefocus="true"><span>港台</span></a></li>
			<li data-type="www.dijiuzhanzhang.com"><a href="javascript:void(0);" hidefocus="true"><span>欧美</span></a></li>
			<li data-type="dijiuzhanzhang.com"><a href="javascript:void(0);" hidefocus="true"><span>韩国</span></a></li>
			<li data-type="www.dijiuzhanzhang.com"><a href="javascript:void(0);" hidefocus="true"><span>日本</span></a></li>
		</ul>
		<span class="more"><a href="http://www.dijiuzhanzhang.com" target="_blank">更多</a></span>
	</div>
	<div class="views">
		<div class="view-item active">
			<ul class="view-list clearfix">
				<li><a href="http://www.dijiuzhanzhang.com" title="尚雯婕"><img src="images/1.jpg" alt="尚雯婕"><span class="name">尚雯婕</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="蔡妍"><img src="images/1.jpg" alt="蔡妍"><span class="name">蔡妍</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="m4m"><img src="images/1.jpg" alt="m4m"><span class="name">m4m</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="黄圣依"><img src="images/1.jpg" alt="黄圣依"><span class="name">黄圣依</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="李治廷"><img src="images/1.jpg" alt="李治廷"><span class="name">李治廷</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="范冰冰"><img src="images/1.jpg" alt="范冰冰"><span class="name">范冰冰</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="弦子"><img src="images/1.jpg" alt="弦子"><span class="name">弦子</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="秦勇"><img src="images/1.jpg" alt="秦勇"><span class="name">秦勇</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="谭杰希"><img src="images/1.jpg" alt="谭杰希"><span class="name">谭杰希</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="杨坤"><img src="images/1.jpg" alt="杨坤"><span class="name">杨坤</span><span class="mask"></span></a></li>
			</ul>
		</div>
		<div class="view-item">
			<ul class="view-list clearfix">
				<li><a href="http://www.dijiuzhanzhang.com" title="尚雯婕"><img src="images/2.jpg" alt="尚雯婕"><span class="name">尚雯婕</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="蔡妍"><img src="images/2.jpg" alt="蔡妍"><span class="name">蔡妍</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="m4m"><img src="images/2.jpg" alt="m4m"><span class="name">m4m</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="黄圣依"><img src="images/2.jpg" alt="黄圣依"><span class="name">黄圣依</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="李治廷"><img src="images/2.jpg" alt="李治廷"><span class="name">李治廷</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="范冰冰"><img src="images/2.jpg" alt="范冰冰"><span class="name">范冰冰</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="弦子"><img src="images/2.jpg" alt="弦子"><span class="name">弦子</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="秦勇"><img src="images/2.jpg" alt="秦勇"><span class="name">秦勇</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="谭杰希"><img src="images/2.jpg" alt="谭杰希"><span class="name">谭杰希</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="杨坤"><img src="images/2.jpg" alt="杨坤"><span class="name">杨坤</span><span class="mask"></span></a></li>
			</ul>
		</div>
		<div class="view-item">
			<ul class="view-list clearfix">
				<li><a href="http://www.dijiuzhanzhang.com" title="尚雯婕"><img src="images/3.jpg" alt="尚雯婕"><span class="name">尚雯婕</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="蔡妍"><img src="images/3.jpg" alt="蔡妍"><span class="name">蔡妍</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="m4m"><img src="images/3.jpg" alt="m4m"><span class="name">m4m</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="黄圣依"><img src="images/3.jpg" alt="黄圣依"><span class="name">黄圣依</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="李治廷"><img src="images/3.jpg" alt="李治廷"><span class="name">李治廷</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="范冰冰"><img src="images/3.jpg" alt="范冰冰"><span class="name">范冰冰</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="弦子"><img src="images/3.jpg" alt="弦子"><span class="name">弦子</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="秦勇"><img src="images/3.jpg" alt="秦勇"><span class="name">秦勇</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="谭杰希"><img src="images/3.jpg" alt="谭杰希"><span class="name">谭杰希</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="杨坤"><img src="images/3.jpg" alt="杨坤"><span class="name">杨坤</span><span class="mask"></span></a></li>
			</ul>
		</div>
		<div class="view-item">
			<ul class="view-list clearfix">
				<li><a href="http://www.dijiuzhanzhang.com" title="尚雯婕"><img src="images/4.jpg" alt="尚雯婕"><span class="name">尚雯婕</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="蔡妍"><img src="images/4.jpg" alt="蔡妍"><span class="name">蔡妍</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="m4m"><img src="images/4.jpg" alt="m4m"><span class="name">m4m</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="黄圣依"><img src="images/4.jpg" alt="黄圣依"><span class="name">黄圣依</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="李治廷"><img src="images/4.jpg" alt="李治廷"><span class="name">李治廷</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="范冰冰"><img src="images/4.jpg" alt="范冰冰"><span class="name">范冰冰</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="弦子"><img src="images/4.jpg" alt="弦子"><span class="name">弦子</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="秦勇"><img src="images/4.jpg" alt="秦勇"><span class="name">秦勇</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="谭杰希"><img src="images/4.jpg" alt="谭杰希"><span class="name">谭杰希</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="杨坤"><img src="images/4.jpg" alt="杨坤"><span class="name">杨坤</span><span class="mask"></span></a></li>
			</ul>
		</div>
		<div class="view-item">
			<ul class="view-list clearfix">
				<li><a href="http://www.dijiuzhanzhang.com" title="尚雯婕"><img src="images/5.jpg" alt="尚雯婕"><span class="name">尚雯婕</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="蔡妍"><img src="images/5.jpg" alt="蔡妍"><span class="name">蔡妍</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="m4m"><img src="images/5.jpg" alt="m4m"><span class="name">m4m</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="黄圣依"><img src="images/5.jpg" alt="黄圣依"><span class="name">黄圣依</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="李治廷"><img src="images/5.jpg" alt="李治廷"><span class="name">李治廷</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="范冰冰"><img src="images/5.jpg" alt="范冰冰"><span class="name">范冰冰</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="弦子"><img src="images/5.jpg" alt="弦子"><span class="name">弦子</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="秦勇"><img src="images/5.jpg" alt="秦勇"><span class="name">秦勇</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="谭杰希"><img src="images/5.jpg" alt="谭杰希"><span class="name">谭杰希</span><span class="mask"></span></a></li>
				<li><a href="http://www.dijiuzhanzhang.com" title="杨坤"><img src="images/5.jpg" alt="杨坤"><span class="name">杨坤</span><span class="mask"></span></a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 加载动画 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5动画导航 h5动画菜单 html5动画导航 html5动画菜单 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到