jQuery實現彈出層列表滑動切換



27 105 36



特效描述:jQuery實現 彈出層列表 滑動切換,jQuery實現彈出層列表滑動切換

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<div class="servicesPop">
	<div id="serFocus">
		<div class="fr" style="position:relative;"><a href="javascript:void(0)" class="close" onclick="closeSerPop()">&nbsp;</a></div>
		<div class="box" id="flash1">
			<div class="yidongL" style="width:360px"><img src="images/services_c1.jpg" width="400" height="273" /></div>
			<div class="servicesTxt" style="float:left">
				<div class="serTit">
					<span class="black font18">成品網站解決網站</span>
					<br />
					<span class="font16">Application software solutions</span>
				</div>
				<p>我們提供Windows及Mac等多操作系統多平臺的應用軟件交互設計、視覺設計、應用端開發服務。從用戶研究、需求溝通、草圖方案、原型制圖、視覺設計、定制開發、軟件測試維護等全方位的為客戶提供最有效的解決方案。</p>
				<div class="cl"><a href="http://51qianduan.com/" class="yidongBt white">成品網站模版</a></div>
			</div>
		</div>
		<div class="box" id="flash2">
			<div class="servicesTxt" style="padding-left:85px;">
				<div class="serTit" style="padding-top:15px;">
					<span class="black font18">網站設計解決方案</span>
					<br />
					<span class="font16">Web and network solutions</span>
				</div>
				<p>根據用戶的需求、市場狀況、企業情況等進行綜合分析可用性的Web解決方案,有效提升企業形象及品牌的知名度。從產品交互原型設計、視覺設計、HTML5頁面開發、功能定制開發等高品質、一體化流程的網站建設服務。</p>
				<div class="cl"><a href="http://51qianduan.com/" class="yidongBt white">網站設計套餐</a></div>
			</div>
			<div class="fl"><img src="images/services_f1.jpg" width="320" height="273" /></div>
		</div>
		<div class="box" id="flash3">
			<div class="yidongL"><img src="images/services_f1.jpg" width="320" height="273" /></div>
			<div class="servicesCon">
				<div class="serTit">
					<span class="black font18">移動應用產品解決方案</span>
					<br />
					<span class="font16">Mobile app solutions</span>
				</div>
				<div class="cl"><span class="Apple">IOS</span><span class="Android">Android</span><span class="Win8">Windows Phone 8</span></div>
				<ul>
					<li>iPhone/Android/Win8 APP交互設計 視覺設計 功能定制開發 基于HTML5開發的網頁APP</li>
					<li>iPad/iPad Retina/iPad Mini/Android/Win8 APP交互設計 視覺設計 功能定制開發</li>
				</ul>
				<div class="cl"><a href="http://51qianduan.com/" class="yidongBt white">移動應用案例</a></div>
			</div>
		</div>
	</div>
	<div class="flash_bar">
		<span class="no" id="f1" onclick="changeflash(1)"></span>
		<span class="no" id="f2" onclick="changeflash(2)"></span>
		<span class="no" id="f3" onclick="changeflash(3)"></span>
	</div>
</div>
<div id="servicesBox">
	<div id="serBox1" class="serBox" onclick="serFocus(1)">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="images/ser_box2.png" /></div>
		<div class="pic2 mypng"><img src="images/ser_box2b.png" /></div>
		<div class="txt1"><span class="tit">成品網站解決方案</span>智能建站系統,可視化操作,30分鐘即可搞定的精美企業網站,資深設計師打造精美模板</div>
		<div class="txt2"><span class="tit">成品網站解決方案</span>智能建站系統,可視化操作,30分鐘即可搞定的精美企業網站,資深設計師打造精美模板</div>
	</div>
	<div class="fgH20"></div>
	<div id="serBox2" class="serBox" onclick="serFocus(2)">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="images/ser_box3.png" /></div>
		<div class="pic2 mypng"><img src="images/ser_box3b.png" /></div>
		<div class="txt1"><span class="tit">網站設計解決方案</span>根據用戶的需求、市場狀況、企業情況等進行綜合分析可用性的Web解決方案</div>
		<div class="txt2"><span class="tit">網站設計解決方案</span>根據用戶的需求、市場狀況、企業情況等進行綜合分析可用性的Web解決方案</div>
	</div>
	<div class="fgH20"></div>
	<div id="serBox3" class="serBox" onclick="serFocus(3)">
		<div class="serBoxOn"></div>
		<div class="pic1 mypng"><img src="images/ser_box1.png" /></div>
		<div class="pic2 mypng"><img src="images/ser_box1b.png" /></div>
		<div class="txt1"><span class="tit">移動應用產品解決方案</span>iOS/Android/Win8 APP交互設計、視覺設計、HTML5開發、功能定制開發</div>
		<div class="txt2"><span class="tit">移動應用產品解決方案</span>iOS/Android/Win8 APP交互設計、視覺設計、HTML5開發、功能定制開發</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$(".serBox").hover(function(){
		$(this).children().stop(false,true);
		$(this).children(".serBoxOn").fadeIn("slow");
		$(this).children(".pic1").animate({right: -110},400);
		$(this).children(".pic2").animate({left: 105},400);
		$(this).children(".txt1").animate({left: -240},400);
		$(this).children(".txt2").animate({right: 40},400);	 
	},function(){
		$(this).children().stop(false,true);
		$(this).children(".serBoxOn").fadeOut("slow");
		$(this).children(".pic1").animate({right:105},400);
		$(this).children(".pic2").animate({left: -110},400);
		$(this).children(".txt1").animate({left: 40},400);
		$(this).children(".txt2").animate({right: -240},400);	
	});
});	
function serFocus(i){
	$(".servicesPop").slideDown("normal");
	changeflash(i);
}
function closeSerPop(){
	$(".servicesPop").slideUp("fast");
}
var currentindex=1;
function changeflash(i){	
	currentindex=i;
	for (j=1;j<=6;j++){
		if(j==i){
			$("#flash"+j).fadeIn("normal");
			$("#flash"+j).css("display","block");
			$("#f"+j).removeClass();
			$("#f"+j).addClass("dq");
		}else{
			$("#flash"+j).css("display","none");
			$("#f"+j).removeClass();
			$("#f"+j).addClass("no");
		}
	}
}
</script>
</div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 圖片翻轉 圖片旋轉 圖片疊加 圖片層疊 圖片延遲加載 圖片延遲 圖片加載 圖片淡出淡進 圖片淡出 圖片淡進 圖片拖動 圖片拖拽 圖片全屏 頭像上傳 圖片上傳 二維碼 圖片放大鏡 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫 帶縮略圖的幻燈片 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 地圖 中國地圖 世界地圖 圖片放大縮小 圖片縮放 圖片大小 圖片放大 圖片縮小 圖片變大 圖片變小 圖片廣告 圖片收縮展開 圖片收縮 圖片展開 旋轉木馬 圖片旋轉木馬 文字旋轉木馬 旋轉木馬插件 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 圖片滑動 圖片滑塊 圖片滾動 圖片滾動條 圖標導航 圖標菜單 自動滾動圖片輪播 彈出層拖動 背景切換 大圖切換 滑動星星打分 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 圖表 圖片 圖片插件 頭像截圖 其他 鼠標懸停 滑動選項卡 滑動切換 提示框/彈出層 圖片文字
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

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

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