jquery圖片切換插件制作圖片與文字切換特效



165 656 219



特效描述:jquery 圖片切換插件 圖片文字切換特效,jquery圖片切換插件,制作圖片和文字切換特效,圖片壓扁與文字動畫滾動、圖片滾動與文字動畫滾動、圖片與文字淡隱淡現等圖文切換效果。jQuery插件。

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jq.imgTxtCut.js"></script>

3. HTML代碼

	<h1>【jquery插件】圖文切換效果</h1>
	<div class="table-box">
		<table width="600" border="0" cellspacing="0" cellpadding="0" class="KS-table">
			<tr>
				<td colspan="2">參數:</td>
			</tr>
			<tr>
				<td width="36%">effects</td>
				<td width="64%">flaser效果(默認)<br />“scroll”效果<br />“fade”效果</td>
			</tr>
			<tr>
				<td>speed</td>
				<td>效果執行時間;normal(默認)</td>
			</tr>
		</table>
	</div>
	<hr />
	<h2>圖片壓扁與文字動畫滾動 flaser效果(默認)</h2>
	<pre>$("#img-txt-box1").imgTxtCut({
	speed : 300
	});</pre>
	<div class="img-txt-flaser clearfix" id="img-txt-box1">
		<ul>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/smalld84e378b75983100be152e4d0e4a4b72.jpg" width="150" height="150" alt="jquery圖片對聯廣告制作jQuery側面浮動圖片廣告" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">jquery圖片對聯廣告制作jQuery側面浮動圖片廣告</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">jquery浮動對聯圖片廣告制作一個側面浮動圖片廣告特效,類似滾屏效果的圖片廣告。jQuery下載。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/small76d7b4e9ff38bfd80496f1bae32c71bf.jpg" width="150" height="150" alt="div css3樣式表制作css3圖片聚光燈特效" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">div css3樣式表制作css3圖片聚光燈特效</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">div布局和css3樣式表打造社交圖標圖片聚光燈特效。css3樣式控制滑過單個社交圖標時,當前高亮,其它圖標變暗的css3圖片聚光燈特效。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/small989e3d7a1959211a37c2df254fda6b4d.jpg" width="150" height="150" alt="div+css多張背景圖片規范寫法圖片透明度顯示" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">div+css多張背景圖片規范寫法圖片透明度顯示</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">div+css教程多張背景圖片最規范的書寫方法,當鼠標滑過A標簽背景圖片透明度顯示。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox"><a target="_blank" href="http://www.dijiuzhanzhang.com/"><img src="images/smallf8852cb544db25262e53339e2ba4b17e.jpg" width="150" height="150" alt="jquery圖片切換插件制作左右按鈕與標題文字圖片切換" /></a>
    			</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">jquery圖片切換插件制作左右按鈕與標題文字圖片切換</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">jquery圖片切換插件制作圖片左右切換與文字上下切換效果,鼠標點擊文字標題圖片左右切換,文字上下切換,支持自動輪播圖片切換。</a></p>
				</div>
			</li>
		</ul>
	</div>
	<h2>圖片滾動與文字動畫滾動 scroll效果(默認)</h2>
	<pre>$("#img-txt-box3").imgTxtCut({
	effects:"scroll",
	speed : 300
	});</pre>
	<div class="img-txt-scrool clearfix" id="img-txt-box3">
		<ul>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery圖片滾動圖片放大展示帶tab滑動選項卡標簽圖片滾動" src="images/small0355db342604226d21b883051b8e7c4d.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery圖片滾動圖片放大展示帶tab滑動選項卡標簽圖片滾動</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery圖片特效制作帶tab滑動選項卡的jquery圖片滾動,選項卡里面的圖片放大展示,默認中間圖片放大展示。</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery.switchable插件制作選項卡、圖片滑動或滾動、手風琴、導航菜單等特效" src="images/small2bdaa0a22ad6928dfba7f626295b54db.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery.switchable插件制作選項卡、圖片滑動或滾動、手風琴、導航菜單等特效</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery.switchable插件是一款整合了Tabs選項卡、slide圖片滑動、scrollable圖片滾動、導航菜單等常見的UI網頁設計。它有簡單易用的API、可靈活配置的Configuration,支持自定義Effect.</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery選項卡插件制作多種滑動slide選項卡切換和fade選項卡切換等" src="images/smallb85af69ca596ed661928f43fd37070be.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery選項卡插件制作多種滑動slide選項卡切換和fade選項卡切換等</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery選項卡插件制作多種選項卡切換特效,滑動slide選項卡切換、fade選項卡切換、自動選項卡切換等。</a></p>
					</div>
				</div>
			</li>
			<li>
				<div class="scrool-box">
					<div class="imgBox">
						<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="jquery導航菜單制作類似選項卡切換的側邊浮動導航條" src="images/smallafa366aba56ec013c824a64753f72f84.jpg" /></a>
					</div>
					<div class="txtBox">
						<h3><a href="http://www.dijiuzhanzhang.com/">jquery導航菜單制作類似選項卡切換的側邊浮動導航條</a></h3>
						<p><a href="http://www.dijiuzhanzhang.com/">jquery導航菜單制作類似選項卡切換效果的側邊浮動層導航條,多種導航菜單點擊slider滑動展示二級菜單。</a></p>
					</div>
				</div>
			</li>
		</ul>
	</div>
	<h2>圖片與文字淡隱淡現 fade效果</h2>
	<pre>$("#img-txt-box2").imgTxtCut({
	effects:"fade",
	speed : 300
	});</pre>
	<div class="img-txt-fade clearfix" id="img-txt-box2">
		<ul>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash圖片特效左右按鈕控制圖片折疊切換效果" src="images/small9c6f18c61edf1e31839ddf7e4117edef.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash圖片特效左右按鈕控制圖片折疊切換效果</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash圖片特效制作左右兩側按鈕控制圖片折疊切換,xml外調圖片折疊切換效果。含flash源碼免費下載</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash圖片特效3D立體動畫焦點圖片切換帶左右按鈕控制滾動" src="images/smalld3fe5207f426ffea078c42aff95cfb13.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash圖片特效3D立體動畫焦點圖片切換帶左右按鈕控制滾動</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash焦點圖片滾動特效制作flash圖片切換滾動帶3D立體動畫效果,帶左右按鈕控制圖片左右切換滾動,圖片xml文件外部調用,含flash源碼免費下載。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash圖片特效制作banner焦點圖片3D立體展示效果" src="images/small45f9f2a9946aa10fa3fde10eaaef5d1d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash圖片特效制作banner焦點圖片3D立體展示效果</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash圖片特效制作banner焦點圖片3D立體動畫輪播滾動效果,帶索引切換按鈕,可以隨意切換圖片滾動。圖片xml文件外部調用,含flash源碼免費下載。</a></p>
				</div>
			</li>
			<li>
				<div class="imgBox">
					<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img height="150" width="150" alt="flash特效制作flash圖片滾動帶按鈕控制左右圖片滾動" src="images/smallc2c8c7a13e553fa79bedb70c34873a6d.jpg" /></a>
				</div>
				<div class="txtBox">
					<h3><a href="http://www.dijiuzhanzhang.com/">flash特效制作flash圖片滾動帶按鈕控制左右圖片滾動</a></h3>
					<p><a href="http://www.dijiuzhanzhang.com/">flash特效制作一個左右帶按鈕控制圖片左右滾動的flash圖片滾動特效,支持flash源碼下載。</a></p>
				</div>
			</li>
		</ul>
	</div>



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


熱門標簽: 文字疊加 文字層疊 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 文字全屏 文字淡出淡進 文字淡出 文字淡進 文字翻轉 文字旋轉 文字延遲加載 文字延遲 文字加載 文字放大縮小 文字縮放 文字大小 文字放大 文字縮小 文字變大 文字變小 文字收縮展開 文字收縮 文字展開 文字提示框 提示文字 文字拖動 文字拖拽 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滾動切換 滾動條切換 滑動選項卡 滑動切換 h5文字動畫 h5文字邊框動畫 html5文字動畫 html5文字邊框動畫 360全景 360度全景 文字滑動 文字滑塊 文字切換 文字選項卡 自動滾動圖片輪播 文字滾動 文字無縫滾動 文字間歇滾動 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 圖片文字 文字導航菜單 文字導航 文字菜單 焦點圖 幻燈片 輪播圖 bar焦點圖 文字 文字插件 其他 帶簡介的焦點圖 圖片切換 圖片選項卡 圖標選項卡 自動滾動圖片輪播 文字列表 圖片文字滾動 文字圖片滾動 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子