jquery.SuperSlide超級滑動門插件多種實用的滑動門切換



114 453 152



特效描述:超級滑動門 滑動門插件 實用滑動門 滑動門切換,非常好用的一款超級滑動門的插件,包含多種特效,僅僅一句話代碼搞定,拋棄了復雜的代碼。保證用過愛上它。

代碼結構

1. 引入CSS

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

2. 引入JS

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

3. HTML代碼

<!-- header S -->
<div id="header" name="header">
	<span class="nav">
		<a href="index.html">首頁</a>|<a href="howToUse.html">如何使用</a>|<a href="param.html">查看參數</a>|<a href="demo.html">基礎效果</a>|<a href="otherDemo.html">擴展效果</a>|<a href="downLoad.html">下載頁面</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=1">常見問題</a>|<a target="_blank" href="http://www.superslide2.com/blog/?cat=4">其它發明</a>|<a target="_blank" href="http://www.superslide2.com/blog/?page_id=12">交流反饋</a>
	</span>
	<div class="title">
			<h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.0</em><span class="author"> -- 大話主席</span>
	</div>
</div>
<!-- header E -->
<!-- content S -->
<div id="content">
	<!-- 1 switchTab S -->
	<div id="switchTab" class="demoBox">
		<div name="effect1" id="effect1" class="hd"><h3><span>1、</span>標簽切換 / 書簽切換 / 默認效果</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/1.0-switchTab-iframe.html?" frameborder="0"></iframe>
					<p class="botTit"><em>1.0-標簽切換</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="fade">fade</option>
										<option value="fold">fold</option>
										<option value="left">left</option>
										<option value="top">top</option>
										<option value="leftLoop">leftLoop</option>
										<option value="topLoop">topLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click">click</option>
									</select>
								</td>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
								<td class="n"></td>
								<td>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".slideTxtBox").slide({<i></i>});</span></p>
					<p class="notice">注意:緩動效果對于fade影響不大;不同緩動效果設置適當“效果速度”,會有最佳效果。<br/></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 1 switchTab E -->
	<!-- 2 focusNews S -->
	<div id="focusNews" class="demoBox ">
		<div name="effect2" id="effect2" class="hd"><h3><span>2、</span>焦點圖 / 幻燈片</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/2.0-focus-iframe.html?&fade&true" frameborder="0"></iframe>
					<p class="botTit"><em>2.0-焦點圖/幻燈片</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="fade">fade</option>
										<option value="fold">fold</option>
										<option value="left">left</option>
										<option value="top">top</option>
										<option value="leftLoop">leftLoop</option>
										<option value="topLoop">topLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option selected="selected" value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click">click</option>
									</select>
								</td>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
								<td class="n"></td>
								<td>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".slideBox").slide({mainCell:".bd ul"<i></i>});</span></p>
					<p class="notice">注意:緩動效果對于fade影響不大;不同緩動效果設置適當“效果速度”,會有最佳效果。<br/></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 2 focusNews E -->
	<!-- 3 picScroll-left S -->
	<div id="picScroll-left" class="demoBox ">
		<div name="effect3" id="effect3" class="hd"><h3><span>3、</span>圖片滾動-左</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/3.0-picScroll-left-iframe.html?&left&true&1&3" frameborder="0"></iframe>
					<p class="botTit"><em>3.0-圖片滾動-左</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="left" class="show">left</option>
										<option value="leftLoop">leftLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option selected="selected" value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">滾動個數<i>[scroll]</i>:</td>
								<td>
									<select name="scroll">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3" selected="selected">3</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
					<p class="notice">注意1:不同緩動效果設置適當“效果速度”,會有最佳效果。<br/>
						注意2:現在是全按鈕開啟情況,不需要按鈕的時候,只要刪除按鈕html或者隱藏即可。
					</p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 3 picScroll-left E -->
	<!-- 4 picScroll-top S -->
	<div id="picScroll-top" class="demoBox ">
		<div name="effect4" id="effect4" class="hd"><h3><span>4、</span>圖片滾動-上</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/4.0-picScroll-top-iframe.html?&top&true&1&3" frameborder="0"></iframe>
					<p class="botTit"><em>4.0-圖片滾動-上</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select  rel="string" name="effect">
										<option value="top" class="show">top</option>
										<option value="topLoop">topLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option selected="selected" value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">滾動個數<i>[scroll]</i>:</td>
								<td>
									<select name="scroll">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3" selected="selected">3</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".picScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
					<p class="notice">注意1:不同緩動效果設置適當“效果速度”,會有最佳效果。<br/>
						注意2:現在是全按鈕開啟情況,不需要按鈕的時候,只要刪除按鈕html或者隱藏即可。
					</p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 4 picScroll-top E -->
	<!-- 5 picMarquee-left S -->
	<div id="picMarquee-left" class="demoBox ">
		<div name="effect5" id="effect5" class="hd"><h3><span>5、</span>圖片無縫滾動-左</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/5.0-picMarquee-left-iframe.html?&leftMarquee&3&50&" frameborder="0"></iframe>
					<p class="botTit"><em>5.0-圖片無縫滾動-左</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="leftMarquee" class="show">leftMarquee</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3" selected="selected">3</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">運行速度<i>[interTime]</i>:</td>
								<td>
									<select name="interTime">
										<option value="50" class="show">50</option>
										<option value="25">25</option>
										<option value="10">10</option>
									</select>
								</td>
								<td class="n">默認反方向運動<i>[opp]</i>:</td>
								<td>
									<select name="opp">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 5 picMarquee-left E -->
	<!-- 6 picMarquee-top S -->
	<div id="picMarquee-top" class="demoBox ">
		<div name="effect6" id="effect6" class="hd"><h3><span>6、</span>圖片無縫滾動-上</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/6.0-picMarquee-top-iframe.html?&topMarquee&3&50&" frameborder="0"></iframe>
					<p class="botTit"><em>6.0-圖片無縫滾動-上</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="topMarquee" class="show">topMarquee</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3" selected="selected">3</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">運行速度<i>[interTime]</i>:</td>
								<td>
									<select name="interTime">
										<option value="50" class="show">50</option>
										<option value="25">25</option>
										<option value="10">10</option>
									</select>
								</td>
								<td class="n">默認反方向運動<i>[opp]</i>:</td>
								<td>
									<select name="opp">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 6 picMarquee-top E -->
	<!-- 7 txtScroll-left S -->
	<div id="txtScroll-left" class="demoBox ">
		<div name="effect7" id="effect7" class="hd"><h3><span>7、</span>文字滾動-左</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/7.0-txtScroll-left-iframe.html?&left&true&2&2" frameborder="0"></iframe>
					<p class="botTit"><em>7.0-文字滾動-左</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="left" class="show">left</option>
										<option value="leftLoop">leftLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option selected="selected" value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">滾動個數<i>[scroll]</i>:</td>
								<td>
									<select name="scroll">
										<option value="1">1</option>
										<option value="2" selected="selected">2</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2" selected="selected">2</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
					<p class="notice">注意1:不同緩動效果設置適當“效果速度”,會有最佳效果。<br/>
						注意2:現在是全按鈕開啟情況,不需要按鈕的時候,只要刪除按鈕html或者隱藏即可。
					</p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 7 txtScroll-left E -->
	<!-- 8 txtScroll-top S -->
	<div id="txtScroll-top" class="demoBox ">
		<div name="effect8" id="effect8" class="hd"><h3><span>8、</span>文字滾動-上</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/8.0-txtScroll-top-iframe.html?&top&true&1&5" frameborder="0"></iframe>
					<p class="botTit"><em>8.0-文字滾動-上</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select  rel="string" name="effect">
										<option value="top" class="show">top</option>
										<option value="topLoop">topLoop</option>
									</select>
								</td>
								<td class="n">自動運行<i>[autoPlay]</i>:</td>
								<td>
									<select name="autoPlay">
										<option value="false">false</option>
										<option selected="selected" value="true">true</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">滾動個數<i>[scroll]</i>:</td>
								<td>
									<select name="scroll">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5">5</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5" selected="selected">5</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<option value="linear">linear</option>
										<option value="swing">swing</option>
										<option value="easeOutCirc">easeOutCirc</option>
										<option value="easeInQuint">easeInQuint</option>
										<option value="easeInBack">easeInBack</option>
										<option value="easeOutBounce">easeOutBounce</option>
										<option value="easeOutElastic">easeOutElastic</option>
										<option value="easing-more">更多</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="700">700</option>
										<option value="1000">1000</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".txtScroll-top").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true<i></i>});</span></p>
					<p class="notice">注意1:不同緩動效果設置適當“效果速度”,會有最佳效果。<br/>
						注意2:現在是全按鈕開啟情況,不需要按鈕的時候,只要刪除按鈕html或者隱藏即可。
					</p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 8 txtScroll-top E -->
	<!-- 9 txtMarquee-left S -->
	<div id="txtMarquee-left" class="demoBox ">
		<div name="effect9" id="effect9" class="hd"><h3><span>9、</span>文字無縫滾動-左</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/9.0-txtMarquee-left-iframe.html?&leftMarquee&3&50&" frameborder="0"></iframe>
					<p class="botTit"><em>9.0-文字無縫滾動-左</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="leftMarquee" class="show">leftMarquee</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2" selected="selected">2</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">運行速度<i>[interTime]</i>:</td>
								<td>
									<select name="interTime">
										<option value="50" class="show">50</option>
										<option value="25">25</option>
										<option value="10">10</option>
									</select>
								</td>
								<td class="n">默認反方向運動<i>[opp]</i>:</td>
								<td>
									<select name="opp">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".txtMarquee-left").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 9 txtMarquee-left E -->
	<!-- 10 txtMarquee-top S -->
	<div id="txtMarquee-top" class="demoBox ">
		<div name="effect10" id="effect10" class="hd"><h3><span>10、</span>文字無縫滾動-上</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe scrolling="no" src="demo/iframe/10.0-txtMarquee-top-iframe.html?&topMarquee&5&50&" frameborder="0"></iframe>
					<p class="botTit"><em>10.0-文字無縫滾動-上</em></p>
				</div>
				<div class="params">
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
							<tr class="tit"> <td colspan="4">常用參數(切換看看)</td> </tr>
							<tr>
								<td class="n">效果<i>[effect]</i>:</td>
								<td>
									<select rel="string" name="effect">
										<option value="topMarquee" class="show">topMarquee</option>
									</select>
								</td>
								<td class="n">可視個數<i>[vis]</i>:</td>
								<td>
									<select name="vis">
										<option value="1">1</option>
										<option value="2">2</option>
										<option value="3">3</option>
										<option value="4">4</option>
										<option value="5" selected="selected">5</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n">運行速度<i>[interTime]</i>:</td>
								<td>
									<select name="interTime">
										<option value="50" class="show">50</option>
										<option value="25">25</option>
										<option value="10">10</option>
									</select>
								</td>
								<td class="n">默認反方向運動<i>[opp]</i>:</td>
								<td>
									<select name="opp">
										<option value="false">false</option>
										<option value="true">true</option>
									</select>
								</td>
							</tr>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 10 txtMarquee-top E -->
	<!-- 11 others S -->
	<div id="effect11" class="demoBox ">
		<div name="effect5" id="effect5" class="hd"><h3><span>11、</span>其它基礎效果</h3></div>
		<div class="bd">
			<ul class="demoList">
				<li>
						<div class="pic">
							<img src="demo/11.1-multipleLine.jpg" />
						</div>
						<h3>多行滾動基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/11.2-multipleColumn.jpg" />
						</div>
						<h3>多列滾動基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/11.3-targetCell.jpg" />
						</div>
						<h3>targetCell基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/11.4-SuperSlideGroup.jpg" />
						</div>
						<h3>SuperSlide組合應用基礎示例</h3>
				</li>
				<li class="o">
						<div class="pic">
							<a href="demo/11.5-onePage.html" target="_blank"><img src="demo/11.5-onePage.jpg" /></a>
						</div>
						<h3>同一頁面使用多個效果示例</h3>
				</li>
			</ul>
		</div><!-- bd E -->
	</div>
	<!-- 11 others E -->
	<script type="text/javascript">
		//當前調用代碼初始化
		$(".params").each(function(ind){
			$(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
		});
		//切換參數調用切換不同效果
		$(".params select").change(function(){
			 if($(this).val()=="easing-more"){ window.open("otherDemo/5.1/easing.html"); return; }
			 var srcStr="";
			 var ind=$(".demoBox").index( $(this).closest(".demoBox") );
			 var iframe = $(this).closest(".demoBox").find("iframe");
			 var selects = $(this).closest(".params").find("select");
			 selects.each(function(){
				srcStr += "&"+$(this).val();
			 });
			 iframe.attr("src",iframe.attr("src").split('&')[0]+srcStr);
			$(".curJsCode").eq(ind).html(getJsCode(ind));
		});
		//當前調用代碼
		function getJsCode( ind ){
			var curJsCode="";
			var $cur = $(".curJsCode").eq(ind);
			$(".params").eq(ind).find("select").each(function(){
				if( $("option",this).index( $("option:selected",this) ) !=0 || $("option",this).attr("class")=="show")
				{
					var tempVal = $(this).attr("rel")=="string"?('"'+$(this).val()+'"'):$(this).val();
					curJsCode+= "," + $(this).attr("name")+":"+tempVal;
				}
			});
			if(ind==0) curJsCode = curJsCode.substring(1);
			$cur.find("i").html(curJsCode);
			curJsCode = $cur.html();
			return curJsCode;
		}
	</script>
</div>
<!-- content E -->
	<!-- 隱藏代碼盒子 S -->
	<div id="displayBox">
		<div class="hd"><a>X</a><h3></h3></div>
		<div class="bd">
			<iframe scrolling="yse" src="" frameborder="0"></iframe>
		</div>
	</div>
	<script type="text/javascript">
			$(".demoList li").hover(function(){ $(this).addClass("on") },function(){ $(this).removeClass("on") });
			$(".demoList li").each(function(i){
				$(this).attr("title", $("img",this).attr("src").split("/")[1] +"-"+ $("h3",this).text() )
			});
			$(".demoList li:not('.o')").click(function(){
				$("#displayBox h3").text(  $("h3",this).text() );
				$("#displayBox iframe").attr("src",$("img",this).attr("src").replace(".jpg",".html"));
				$("#displayBox").show();
			});
			//當前效果代碼
			$("#displayBox .hd a").click(function(){ $("#displayBox").hide() }); //關閉隱藏盒子
			$("#displayBox").blur( function(){ $(this).hide } );
			var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
			if( isIE6 ){ $(window).scroll(function(){ $("#displayBox").css("top", $(document).scrollTop()+10) }); }
	</script>
<!-- 右側導航 -->
<div class="rightNav">
	<a href="#header"><em>0</em>top</a>
	<a href="#effect1"><em>1</em>書簽切換</a>
	<a href="#effect2"><em>2</em>幻燈片</a>
	<a href="#effect3"><em>3</em>圖片滾動-左</a>
	<a href="#effect4"><em>4</em>圖片滾動-上</a>
	<a href="#effect5"><em>5</em>圖片無縫滾動-左</a>
	<a href="#effect6"><em>6</em>圖片無縫滾動-上</a>
	<a href="#effect7"><em>7</em>文字滾動-左</a>
	<a href="#effect8"><em>8</em>文字滾動-上</a>
	<a href="#effect9"><em>9</em>文字無縫滾動-左</a>
	<a href="#effect10"><em>10</em>文字無縫滾動-上</a>
	<a href="#effect11"><em>11</em>其它基礎效果</a>
</div>
<script type="text/javascript">
	var btb=$(".rightNav");
	var tempS;
	$(".rightNav").hover(function(){
			var thisObj = $(this);
			tempS = setTimeout(function(){
			thisObj.find("a").each(function(i){
				var tA=$(this);
				setTimeout(function(){ tA.animate({right:"0"},300);},50*i);
			});
		},200);
	},function(){
		if(tempS){ clearTimeout(tempS); }
		$(this).find("a").each(function(i){
			var tA=$(this);
			setTimeout(function(){ tA.animate({right:"-110"},300,function(){
			});},50*i);
		});
	});
	var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
	if( isIE6 ){ $(window).scroll(function(){ btb.css("top", $(document).scrollTop()+30) }); }
</script>
<div id="footer">Copyright ?2011-2013 大話主席 </div>



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


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 滑動選項卡 滑動切換 圖片滑動 圖片滑塊 純圖片輪播 圖片輪播 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子