jquery hover文字列表滑動切換_點擊文字列表彈出圖片詳細內容信息



121 482 161



特效描述:文字列表 滑動切換 點擊文字列表彈出 圖片詳細內容,鼠標滑過左右切換,點擊彈出層

代碼結構

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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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://www.dijiuzhanzhang.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>



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


熱門標簽: 文字疊加 文字層疊 文字提示框 提示文字 文字收縮展開 文字收縮 文字展開 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 文字翻轉 文字旋轉 文字淡出淡進 文字淡出 文字淡進 文字全屏 文字延遲加載 文字延遲 文字加載 文字拖動 文字拖拽 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滾動切換 滾動條切換 滑動選項卡 滑動切換 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字滑動 文字滑塊 文字滾動 文字無縫滾動 文字間歇滾動 文字切換 文字選項卡 彈出層拖動 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 圖片文字 文字導航菜單 文字導航 文字菜單 焦點圖 幻燈片 輪播圖 bar焦點圖 文字 文字插件 文字提示框 提示文字 帶簡介的焦點圖 圖片滑動 圖片滑塊 文字列表 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子