基于jQuery實現SuperSlide2.1滑動門插件



30 117 40



特效描述:基于jQuery實現 SuperSlide2.1 滑動門插件,基于jQuery實現SuperSlide2.1滑動門插件

代碼結構

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="jquery1.42.min.js"></script>

3. HTML代碼

<style type="text/css">
#content{  padding:32px 0 30px 0;    }
</style>
<!-- header S -->
<div id="header" name="header">
	<div class="headerBg"></div>
	<span class="nav">
		<a href="index.html">首頁</a>|<a href="param.html">查看參數</a>|<a href="demo.html">基礎效果</a>|<a href="otherDemo.html">擴展效果</a>
	</span>
	<div class="title">
			<h1 tite="SuperSlide" id="logo">SuperSlide</h1><em>v2.1</em><span class="author"> -- 大話主席</span>
	</div>
</div>
<!-- header E -->
<!-- content S -->
<div id="content" name="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 allowTransparency="true" 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="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" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</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 allowTransparency="true" 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="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 new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</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 allowTransparency="true" 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="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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<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>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" 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="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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<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>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" scrolling="no" _src="demo/iframe/5.0-picMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" 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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<td class="n new" title="v2.1 新增:長按按鈕10倍加速運行。">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click" selected="selected">click</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" scrolling="no" _src="demo/iframe/6.0-picMarquee-top-iframe.html?&topMarquee&3&50&false&true&click" 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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<td class="n new" title="v2.1 新增:長按按鈕10倍加速運行。">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click" selected="selected">click</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" 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="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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<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>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" 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="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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<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>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" scrolling="no" _src="demo/iframe/9.0-txtMarquee-left-iframe.html?&leftMarquee&3&50&false&true&click" 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="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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<td class="n new" title="v2.1 新增:長按按鈕10倍加速運行。">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click" selected="selected">click</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 allowTransparency="true" scrolling="no" _src="demo/iframe/10.0-txtMarquee-top-iframe.html?&topMarquee&5&50&false&true&click" 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>
							<tr>
								<td class="n" title="前/后按鈕是否繼續循環,若為false則當翻動到最前/后頁時,前/后按鈕點擊無效">前后按鈕循環<i>[pnLoop]</i>:</td>
								<td>
									<select name="pnLoop">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<td class="n new" title="v2.1 新增:長按按鈕10倍加速運行。">觸發方式<i>[trigger]</i>:</td>
								<td>
									<select rel="string" name="trigger">
										<option value="mouseover">mouseover</option>
										<option value="click" selected="selected">click</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移到容器層是否停止播放">停止播放<i>[mouseOverStop]</i>:</td>
								<td>
									<select name="mouseOverStop">
										<option value="true">true</option>
										<option value="false">false</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 nav S -->
	<div id="topNav" class="demoBox ">
		<div name="effect11" id="effect11" class="hd"><h3><span>11. </span>導航</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/11.0-nav-iframe.html?&slideDown&300&0&true&true&" frameborder="0"></iframe>
					<p class="botTit"><em>12.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="slideDown" selected="selected">slideDown</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="300" selected="selected">300</option>
										<option value="100">100</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n" title="鼠標停留多少毫秒后才觸發效果">延遲觸發<i>[triggerTime]</i>:</td>
								<td>
									<select name="triggerTime">
										<option value="150">150</option>
										<option value="300">300</option>
										<option value="0" selected="selected">0</option>
									</select>
								</td>
								<td class="n new"  title="v2.1 新增:默認是否執行效果">默認執行<i>[defaultPlay]</i>:</td>
								<td>
									<select name="defaultPlay">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new" title="v2.1 新增:鼠標移走,0.3秒后返回默認狀態">返回默認<i>[returnDefault]</i>:</td>
								<td>
									<select name="returnDefault">
										<option value="false">false</option>
										<option value="true" selected="selected">true</option>
									</select>
								</td>
								<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<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>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery("#nav").slide({ type:"menu", titCell:".nLi", targetCell:".sub"<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 11 nav E -->
	<!-- 12 sideMenu S -->
	<div id="sideMenu" class="demoBox ">
		<div name="effect12" id="effect12" class="hd"><h3><span>12. </span>手風琴</h3></div>
		<div class="bd">
				<div class="iframeWrap">
					<iframe allowTransparency="true" scrolling="no" _src="demo/iframe/12.0-sideMenu-iframe.html?&slideDown&300&mouseover&150&true&true&" frameborder="0"></iframe>
					<p class="botTit"><em>13.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="slideDown" selected="selected">slideDown</option>
									</select>
								</td>
								<td class="n">效果速度<i>[delayTime]</i>:</td>
								<td>
									<select name="delayTime">
										<option value="500">500</option>
										<option value="300" selected="selected">300</option>
										<option value="100">100</option>
										<option value="0">0</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" title="鼠標停留多少毫秒后才觸發效果">延遲觸發<i>[triggerTime]</i>:</td>
								<td>
									<select name="triggerTime">
										<option value="150">150</option>
										<option value="300">300</option>
										<option value="0">0</option>
									</select>
								</td>
							</tr>
							<tr>
								<td class="n new"  title="v2.1 新增:默認是否執行效果">默認執行<i>[defaultPlay]</i>:</td>
								<td>
									<select name="defaultPlay">
										<option value="true">true</option>
										<option value="false">false</option>
									</select>
								</td>
								<td class="n new" title="v2.1 新增:鼠標移走,0.3秒后返回默認狀態">返回默認<i>[returnDefault]</i>:</td>
								<td>
									<select name="returnDefault">
										<option value="false">false</option>
										<option value="true" selected="selected">true</option>
									</select>
								</td>
							</tr>
							<tr>
							 	<td class="n">緩動效果<i>[easing]</i>:</td>
								<td>
									<select rel="string" name="easing">
										<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>
					</table>
					<p class="jsCode">當前調用代碼:<span class="curJsCode">jQuery(".sideMen").slide({titCell:"h3", targetCell:"ul",defaultIndex:1<i></i>});</span></p>
				</div>
		</div><!-- bd E -->
	</div>
	<!-- 12 sideMenu E -->
	<!-- T1 others S -->
	<div id="others" class="demoBox">
		<div name="effectT1" id="effectT1" class="hd"><h3><span>T1. </span>其它基礎效果</h3></div>
		<div class="bd">
			<ul class="demoList">
				<li>
						<div class="pic">
							<img src="demo/T1.1-multipleLine.jpg" />
						</div>
						<h3>多行滾動基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/T1.2-multipleColumn.jpg" />
						</div>
						<h3>多列滾動基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/T1.3-targetCell.jpg" />
						</div>
						<h3>targetCell基礎示例</h3>
				</li>
				<li>
						<div class="pic">
							<img src="demo/T1.4-SuperSlideGroup.jpg" />
						</div>
						<h3>SuperSlide組合應用基礎示例</h3>
				</li>
				<li class="o">
						<div class="pic">
							<a href="demo/T1.5-onePage.html" target="_blank"><img src="demo/T1.5-onePage.jpg" /></a>
						</div>
						<h3>同一頁面使用多個效果示例</h3>
				</li>
				<li class="new">
						<div class="pic">
							<img src="demo/T1.6-doubleTab.jpg" />
						</div>
						<h3>雙重Tab(slide組合)</h3>
						<i></i>
				</li>
				<li class="new">
						<div class="pic">
							<img src="demo/T1.7-tabMarquee.jpg" />
						</div>
						<h3>Tab+無縫滾動(slide組合)</h3>
						<i></i>
				</li>
				<li class="new">
						<div class="pic">
							<img src="demo/T1.8-picFocus.jpg" />
						</div>
						<h3>圖片導航焦點圖</h3>
						<i></i>
				</li>
			</ul>
		</div><!-- bd E -->
	</div>
	<!-- T1 others E -->
	<script type="text/javascript">
		//隔行添加demoBoxEven
		$(".demoBox").each(function(i){ if (i%2==0)$(this).addClass("demoBoxEven"); });
		//當前調用代碼初始化
		$(".params").each(function(ind){
			$(this).find(".curJsCode").eq(ind).html(getJsCode(ind));
		});
		//切換參數調用切換不同效果
		$(".params select").change(function(){
			 if($(this).val()=="easing-more"){ window.open("otherDemo/T2.1/easing.html"); return; }
			 var srcStr="";
			 var ind=$(".params").index( $(this).closest(".params") );
			 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 allowTransparency="true" 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="#content"><em>^</em>回到頂部</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 class="new" href="#effect11"><em>11</em>常用導航 [v2.1]</a>
	<a class="new" href="#effect12"><em>12</em>手風琴 [v2.1]</a>
	<a href="#effectT1"><em>T1</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"},200);},50*i);
			});
		},200);
	},function(){
		if(tempS){ clearTimeout(tempS); }
		$(this).find("a").each(function(i){
			var tA=$(this);
			setTimeout(function(){ tA.animate({right:"-110"},200,function(){
			});},50*i);
		});
	});
	var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest;
	//滾動加載
	var scrollLoad =function(){
		$("#content iframe[_src]").each(function(){
				var t = $(this);
				if( t.offset().top<= $(document).scrollTop() + $(window).height()  )
				{
					t.attr( "src",t.attr("_src") ).removeAttr("_src");
				}
		});//each E
	}
	scrollLoad();
	$(window).scroll(function(){ 
		if(isIE6){ btb.css("top", $(document).scrollTop()+30) }
		scrollLoad();
	});
</script>
<div style="text-align:center;clear:both">
</div>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 收縮展開 展開收縮 收縮 展開 導航切換 菜單切換 滾動切換 滾動條切換 文字收縮展開 文字收縮 文字展開 圖片切換 圖片選項卡 圖標選項卡 文字切換 文字選項卡 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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