jquery.SuperSlide超级滑动门插件多种实用的滑动门切换



109 435 146



特效描述:超级滑动门 滑动门插件 实用滑动门 滑动门切换,非常好用的一款超级滑动门的插件,包含多种特效,仅仅一句话代码搞定,抛弃了复杂的代码。保证用过爱上它。

代码结构

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

加群请备注:从官网了解到