jquery css3 animation屬性仿360音樂首頁動畫選項卡切換代碼



98 391 131



特效描述:音樂首頁動畫 選項卡切換,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

加群請備注:從官網了解到

湖北30选5开奖结果走势图表