利用jquery实现左右平滑滚动效果



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

85 337 113



特效描述:利用jquery实现 左右平滑 滚动效果。利用jquery实现左右平滑滚动效果

代码结构

1. 引入JS

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.smoothDivScroll-1.0-min.js" type="text/javascript"></script>

2. HTML代码

<div id="mainContent">
  <p>
		Smooth Div Scroll is a jQuery plugin that scrolls content horizontally left or right. Apart
		from many of the other scrolling plugins that have been written for jQuery, Smooth
		Div Scroll does not limit the scroling to distinct steps. As the name of the plugin hints, scrolling is smooth. There are no visible buttons or links since the scrolling is done using hotspots within the scrollable area or via autoscrolling. Unobtrusive and smooth is the key here.</p>
		<h2><a name="toc">Table of contents</a></h2>
		<ol>
		<li><a href="#howitworks">What is Smooth Div Scroll?</a></li>
		<li><a href="#quickdemo">Simple demo</a></li>
		<li><a href="#moreexamples">More examples!</a>
		</li>
		<li><a href="#options">Options</a></li>
		<li><a href="#alteringOptions">Altering options after initialization</a></li>
		<li><a href="#publicMethods">Public methods</a></li>
		<li><a href="#callbacks">Callbacks</a></li>
		<li><a href="#thecss">The CSS</a></li>
		<li><a href="#dependencies">Dependencies</a></li>
		</ol>
	<h2><a name="howitworks">What is Smooth Div Scroll?</a></h2>
	<p>The basic principle behind Smooth Div Scroll is simple: let one div (<b>scrollableArea</b>) scroll inside another div (<b>scrollWrapper</b>). Ether two hotspots are used to trigger the actual scrolling (<b>scrollingHotSpotLeft</b> and <b>scrollingHotSpotRight</b>) or you can let it autoscroll. The <b>scrollWrapper</b> determines how much of the <b>scrollableArea</b> that should be visible - everything outside the scrollWrapper is hidden from view.</p>
	<img src="images/scroll_illustration.jpg" alt="Illustration showing the different elements of Smooth Div Scroll" />
	<h2><a name="quickdemo">Simple demo</a></h2>
	<p>
		Here's a quick demo of Smooth Div Scroll in action:
	</p>
	<!-- You should specify the width and height of the images. Otherwise Google Chrome
	can't calculate the total width of the scrollable area -->
	<div id="makeMeScrollable">
		<div class="scrollingHotSpotLeft"></div>
		<div class="scrollingHotSpotRight"></div>
		<div class="scrollWrapper">
			<div class="scrollableArea">
				<a href="#"><img src="images/demo/field.jpg" alt="Demo image" width="497" height="330" border="0" /></a>
				<a href="#"><img src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" /></a>
				<a href="#"><img src="images/demo/pencils.jpg" alt="Demo image" width="496" height="330" /></a>
				<a href="#"><img src="images/demo/golf.jpg" alt="Demo image" width="366" height="330" id="startAtMe" /></a>
				<a href="#"><img src="images/demo/river.jpg" alt="Demo image" width="496" height="330" /></a>
				<a href="#"><img src="images/demo/train.jpg" alt="Demo image" width="440" height="330" /></a>
				<a href="#"><img src="images/demo/leaf.jpg" alt="Demo image" width="496" height="330" /></a>
				<a href="#"><img src="images/demo/dog.jpg" alt="Demo image" width="497" height="330"/>	</a>		</div>
		</div>
	</div>
	<br/>	
	<p>The jQuery code for this demo looks like this:</p>
<pre><code class="javascript">
&lt;script type="text/javascript"&gt;
		$(function() {
			$("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onstart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 15, startAtElementId: "startAtMe", visibleHotSpots: "always"});
		});
&lt;/script&gt;
</code></pre>	
		<p>
		I've set some options that are not default for this demo:
		</p>
		<ul>
		<li>I set the autoscrolling to "onstart" (<b>autoScroll: "onstart"</b>) so I get autoscrolling until the user uses one of the hotspots.</li>
		<li>I want the autoscrolling to go back and forth (<b>autoScrollDirection: "backandforth"</b>).
		<li>Custom autoscrolling speed (<b>autoScrollStep: 1</b> and <b>autoScrollInterval: 15</b>).
		<li>I've set the option for starting at a specific element inside the scrollable area. In this case I've given the element that I want to start at the id "<b>startAtMe</b>" but you can name it whatever you like as long as you tell Smooth Div Scroll which element it is.</li>
		<li>I want the hotspots to be visible all the time (<b>visibleHotSpots: "always"</b>).
		</ul>
	<p>(In this example I've used only a couple of the available options. You'll find all the <a href="#options">options described here</a>.) In the demo above the (X)HTML-code looks like this:</p>
<pre><code class="html">
	&lt;div id="makeMeScrollable"&gt;
		&lt;div class="scrollingHotSpotLeft"&gt;&lt;/div&gt;
		&lt;div class="scrollingHotSpotRight"&gt;&lt;/div&gt;
		&lt;div class="scrollWrapper"&gt;
			&lt;div class="scrollableArea"&gt;
				&lt;img src="images/demo/field.jpg" alt="Demo image" width="497" height="330" /&gt;
				&lt;img src="images/demo/gnome.jpg" alt="Demo image" width="496" height="330" /&gt;
				&lt;img src="images/demo/pencils.jpg" alt="Demo image" width="496" height="330" /&gt;
				&lt;img src="images/demo/golf.jpg" alt="Demo image" width="366" height="330" id="startAtMe" /&gt;
				&lt;img src="images/demo/river.jpg" alt="Demo image" width="496" height="330" /&gt;
				&lt;img src="images/demo/train.jpg" alt="Demo image" width="440" height="330" /&gt;
				&lt;img src="images/demo/leaf.jpg" alt="Demo image" width="496" height="330" /&gt;
				&lt;img src="images/demo/dog.jpg" alt="Demo image" width="497" height="330"/&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
</code>
</pre>
<p>As you can see there is a surrounding div with the id <b>makeMeScrollable</b>. This is the element that I turn into a Smooth Div Scroll. You can also see the element that I've given the ID <b>startAtMe</b> so I can tell Smooth Div Scroll that I want it to start the scrolling at this element using the option <b>startAtElementId: "startAtMe"</b>.</p>
<p><b>Please note that you may have to give the elements that you put inside the scrollable area some styling to make sure that they are positioned like you want them. Here's a good template to start with:
</b></p>
<pre>
<code class="css">
	#makeMeScrollable div.scrollableArea *
	{
		position: relative;
		display: block;
		float: left;
		padding: 0;
		margin: 0;
	}
</code>
</pre>
<p>
In this example there's no space between the elements (in this case images) inside the scrollable area. If you want a space between them, use <b>padding</b> and not margin since margin tends to generate errors in Internet Explorer.</p>
<p>
Also make it a habit to <b>add width and height</b> to the element tags. Otherwise some browsers will have problems calculating the total width of all the elements inside the scroller. 
</p>
<a href="#toc">Back to table of contents</a>	
<!--
<h2><a name="moreexamples">More examples!</a></h2>
<p>There are probably hundreds of cool uses for this plugin, so this is just a few examples showing how you can use it:</p>
<ul>
<li><a href="scrollingText.htm">Scrolling text</a></li>
<li><a href="smallScroller.htm">Small scroller</a></li>
<li><a href="runningTicker.htm">Running ticker</a></li>
<li><a href="clickableLogoParade.htm">Clickable logo parade</a></li>
<li><a href="pingPongScroller.htm">Ping-pong scroller</a></li>
<li><a href="multipleAutoscrollers.htm">Multiple autoscrollers on one page (loading content through AJAX)</a></li>
</ul>
<a href="#toc">Back to table of contents</a>
-->
<h2><a name="options">Options</a></h2>
<p>Here are the options that can be used to configure and control the plugin. You can always leave all options out. Smooth Div Scroll will then use the default values.</p>
<table>
<thead>
<tr><th>Option</th><th>Default value</th><th>Comment</th></tr>
<tr><td>scrollingHotSpotLeft:</td><td>"div.scrollingHotSpotLeft"</td><td>The CSS class or id for the hotspot that triggers scrolling left.</td></tr>
<tr><td>scrollingHotSpotRight:</td><td>"div.scrollingHotSpotRight"</td><td>The CSS class or id for the hotspot that triggers scrolling right.</td></tr>
<tr><td>scrollWrapper:</td><td>"div.scrollWrapper"</td><td>The CSS class or id of the wrapper element that surrounds the scrollable area.</td></tr>
<tr><td>scrollableArea:</td><td>"div.scrollableArea"</td><td>The CSS class or id of the actual element that is scrolled left or right.</td></tr>
<tr><td>hiddenOnStart:</td><td>false</td><td>True or false. Determines whether the element should be visible or hidden on start. This can be useful if you combine Smooth Div Scroll with some other jQuery plugin that shows or hides areas, like an accordion.</td></tr>
<tr><td>ajaxContentURL:</td><td>""</td><td>Optional. If supplied, the content of scrollableArea is fetched via AJAX using the supplied URL.</td></tr>
<tr><td>countOnlyClass:</td><td>""</td><td>Optional. If supplied, the function that calculates the total width of the scrollable area will only count the width of the elements that have this class. This can be useful if you have content grouped in columns and only the columns should be made scrollable. Otherwise Smooth Div Scroll will sum up the total width of <i>all</i> the elements in the columns and in this case you only want the width of the actual columns.</td></tr>
<tr><td>scrollStep</td><td>15</td><td>Optional. Determines how many pixels the scrollable area should move in each scrolling cycle when scrolling manually. High value means bigger steps which means faster scrolling. But always make sure you balance this value with the scrollInterval since bigger steps also means "choppier" scrolling.</td></tr>
<tr><td>scrollInterval</td><td>10</td><td>Optional. Determines the elapsed time between each call to the function that does the manual scrolling. If you'd compare scrolling with an animated movie, this option would be the equivalent of the number of frames per second in the movie. For really slow manual scrolling you'd set scrollStep to 1 and scrollInterval to 100 (100 milliseconds = ten calls/frames per second). So a lower value means more calls per second and thus faster scrolling. A higher value means fewer calls per second and slower scrolling. Balance this option together with the scrollStep option to get the speed you want and at the same time a scrolling that is as smooth as possible.</td></tr>
<tr><td>mouseDownSpeedBooster:</td><td>3</td><td>Use this if you want a speed boost when the user presses the mouse button while hovering over one of the hotspots.<br />1 = normal speed (no boost)<br />2 is twice as fast as normal<br />3 is three times as fast<br />and so on. The default value is three times as fast.</td></tr>
<tr><td>autoScroll:</td><td>""</td><td>Optional. Leave it out if you don't want any autoscrolling. Otherwise use the values "<b>onstart</b>" or "</b>always</b>". Using onstart the scrolling will start automatically after the page has loaded and scroll according to the method you've selected using the <b>autoScrollDirection option</b>. When the user moves the mouse over the left or right hotspot the autoscroll will stop. After that the scrolling will only be triggered by the hotspots. Using always - the hotspots are disabled alltogether and the scrollable area will <i>only</i> scroll automatically.</td></tr>
<tr><td>autoScrollDirection</td><td>"right"</td><td>Optional. This option controls the direction and behavior of the autoscrolling and is only used if autoscrolling is activated. Using <b>right</b> Smooth Div Scroll autoscrolls right and stops when it reaches the end. Using <b>left</b> it will autoscroll left and stop when it reaches the end. Setting the option to "left" is only relevant if you have set the option startAtElementId. Otherwise you will be at the first element and therefore you can't scroll any further left. If you set the value to <b>backandforth</b> Smooth Div Scroll starts autoscrolling right and when it reaches the end, switches to autoscrolling left and so on - ping-pong style. Setting the option to <b>endlessloopright</b> will give you continuous scrolling right and setting it to <b>endlessloopleft</b> will give you continuous scrolling left.</td></tr>
<tr><td>autoScrollStep:</td><td>5</td><td>Optional. Determines how many pixels the scrollable area should move in each scrolling cycle. High value means bigger steps which means faster scrolling. But always make sure you balance this value with the autoScrollInterval since bigger steps also means "choppier" scrolling.</td></tr>
<tr><td>autoScrollInterval</td><td>10</td><td>Optional. Determines the elapsed time between each call to the autoscrolling function. If you'd compare scrolling with an animated movie, this option would be the equivalent of the number of frames per second in the movie. For really slow autoscrolling you'd set autoScrollStep to 1 and autoScrollInterval to 100 (100 milliseconds = ten calls/frames per second). So a lower value means more calls per second and thus faster scrolling. A higher value means fewer calls per second and slower scrolling. Again, try to balance this option together with the autoScrollStep option to get the speed you want and still get the scrolling as smooth as possible.</td></tr>
<tr><td>visibleHotSpots:</td><td>""</td><td>Optional. Leave it blank for invisible hotspots. Otherwise use the values "onstart" or "always". Onstart makes the hotspots visible for X-number of seconds (controlled via <b>hotSpotsVisibleTime</b>) directly after the page has loaded, then they become invisible. Always is for making them visible all the time. Feel free to alter the graphics and CSS for the visible hotspots. The CSS and graphics supplied with the plugin can serve as a good starting point.</td></tr>
<tr><td>hotSpotsVisibleTime:</td><td>5</td><td>Optional. If you have set "onstart" as the value for the option <b>visibleHotSpots</b>, you set the number of seconds that you want the hotspots to be visible. After this time they will become invisible again.</td></tr>
<tr><td>startAtElementId:</td><td>""</td><td>Optional. Use this option if you want the offset of the scrollable area to be positioned at a specific element directly after the page has loaded. First give your element an ID in the HTML code and then provide this ID as a option.</td></tr>
</thead>
<tbody>
</tbody>
</table>
<br/>
<p><a href="#toc">Back to table of contents</a></p>
<h2><a name="alteringOptions">Altering options after initialization</a></h2>
<p>A really nice thing about the jQuery UI widget factory is that it supports altering options after the plugin has initialized (altering options during runtime). If you want to alter an option after the plugin has loaded, it looks like this:</p>
<pre><code class="javascript">
$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","endlessloopright");
</code>
</pre>
<p>Looking at the syntax, the three parameters you supply are these:
</p>
<ol>
<li><b>"option"</b> - tells the plugin that you want to alter an option.</li>
<li><b>"autoScrollDirection"</b> - the name of the option that you want to alter, in this case the autoscroll direction.</li>
<li><b>"endlessloopright"</b> - the value you want to set for this option, in this case "endlessloopright".</li>
</ol>
<p>
If you don't want to alter the option - just get its value, you just leave out the last parameter, like this:
</p>
<pre><code class="javascript">
$("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection");
</code>
</pre>
<p>Currently altering some of the options won't do anything, for example changing the options <b>scrollingHotSpotLeft</b>, <b>scrollingHotSpotRight</b>, <b>scrollableArea</b> and <b>scrollWrapper</b>. To be perfectly honest I haven't tried altering all the options after initialization so let me know if you stumble upon some odd behaviors or bugs, or if there's an option that you need to change that can't be changed after initialization.
</p>
<p><a href="#toc">Back to table of contents</a></p>
<h2><a name="publicMethods">Public methods</a></h2>
<p>Being able to interact with the plugin after initialization through public methods was the main reason why I chose to rewrite the plugin and base it on jQuery UI widget factory. Many users want to combine Smooth Div Scroll with other jQuery plugins and having access to public methods makes this so much easier.</p>
<p>The public methods that you can use are these:</p>
<table>
<thead></thead>
<tbody>
<tr><th>Method</th><th>Parameters</th><th>What it does</th></tr>
<tr><td>showHotSpotBackgrounds</td><td>optional parameter fadeSpeed (in milliseconds)</td><td>If you want the hotspots to fade in. If fadeSpeed is omited they are shown instantly.</td></tr>
<tr><td>hideHotSpotBackgrounds</td><td>optional parameter fadeSpeed (in milliseconds)</td><td>If you want the hotspots to fade out. If fadeSpeed is omited they are hidden instantly.</td></tr>
<tr><td>moveToElement</td><td>required parameter moveTo ("first", "start", "last", "number"), optional parameter elementNumber</td><td>This moves the scrollable area to the element you specify with the parameter moveTo. "first" moves to the first element, "start" moves to the start element (the element that you have specified with the option "startAtElementId", "last" moves to the last element and "number" moves to the element number that you specify using the optional parameter "elementNumber".</td></tr>
<tr><td>addContent</td><td>required paramteter ajaxContentURL, optional parameter addWhere</td><td>This adds new content to the scrollable area. Using optional parameter "addWhere" you control where the content is added. Setting addWhere to "first" adds the new content before the currently present content. If the parameter "addWhere" is omited, the new content is added after the currently present content.</td></tr>
<tr><td>replaceContent</td><td>required parameter ajaxContentURL</td><td>This method replaces the currently present content.</td></tr>
<tr><td>recalculateScrollableArea</td><td>no parameters</td><td>This method simply recalculates and sets the width of the scrollable area. It's used internally when content is changed, for example if you call addContent or replaceContent. But I've decided to expose it as a public method in case you need to recalculate the scrollable area, for example if you add or remove elements inside the scrollable area from outside the plugin.</td></tr>
<tr><td>stopAutoScroll</td><td>no parameters</td><td>This simply stops any ongoing autoscrolling. A very simple method, but very useful.</td></tr>
<tr><td>startAutoScroll</td><td>no parameters</td><td>Starts the autoscrolling.<td></tr>
<tr><td>restoreOriginalElements</td><td>no parameters</td><td>When the plugin is initialized, it stores the original elements (and their order). If you call this method, these stored elements are restored (they replace the current elements).</td></tr>
<tr><td>show</td><td>no parameters</td><td>Shows the whole scroller if it's hidden.</td></tr>
<tr><td>destroy</td><td>no parameters</td><td>This method is part of the widget factory. It removes all the functionality and DOM-changes that SmoothDivScroll has added to the original element.</td></tr>
</tbody>
</table>
<br/>
<p>Here's how you call a public method:</p>
<pre>
<code class="javascript">
$("#makeMeScrollable").smoothDivScroll("stopAutoScroll");
</code>
</pre>
<p>...and if the method has parameters, it looks like this:</p>
<pre>
<code class="javascript">
$("#makeMeScrollable").smoothDivScroll("moveToElement", "first");
</code>
</pre>
<p>...or like this, if there are more than one parameters:</p>
<pre>
<code class="javascript">
$("#makeMeScrollable").smoothDivScroll("moveToElement", "number", 2);
</code>
</pre>
<p><a href="#toc">Back to table of contents</a></p>
<h2><a name="callbacks">Callbacks</a></h2>
<p>I know how much I love when plugin developers supply you with callbacks for major events in their plugins so I've added this as well. The callbacks that are currently implemented are:</p>
<table>
<thead><th>Callback</th><th>Triggers</th></thead>
<tbody>
<tr><td>autoScrollLeftLimitReached</td><td>Triggered when the autoscroller can't scroll any further left.</td></tr>
<tr><td>autoScrollRightLimitReached</td><td>Triggered when the autoscroller can't scroll any further right.</td></tr>
<tr><td>scrollLeftLimitReached</td><td>Triggered when the manual scroller can't scroll any further left.</td></tr>
<tr><td>scrollRightLimitReached</td><td>Triggered when the manual scroller can't scroll any further right.</td></tr>
<tr><td>mouseOverLeftHotSpot</td><td>Triggered when the user moves the mouse pointer over the left hotspot.</td></tr>
<tr><td>mouseOverRightHotSpot</td><td>Triggered when the user moves the mouse pointer over the right hotspot.</td></tr>
<tr><td>autoScrollStopped</td><td>Triggered when autoscrolling stops.</td></tr>
<tr><td>autoScrollStarted</td><td> Triggered when autoscrolling starts.</td></tr>
<tr><td>movedToFirstElement</td><td>Triggers after you have moved to the first element.</td></tr>
<tr><td>movedToStartElement</td><td>Triggers after you have moved to the start element.</td></tr>
<tr><td>movedToLastElement</td><td>Triggers after you have moved to the last element.</td></tr>
<tr><td>movedToElementNumber</td><td>Triggers after you have moved to a certain element (elementNumber).</td></tr>
<tr><td>windowResized</td><td>Triggers when the browser window is resized.</td></tr>
</tbody>
</table>
<br/>
<p>If you want to hook on to a callback you need to write a function that responds to the callback. This function is added to the options when you initialize the plugin. It's sort of like regular options, but instead of values you supply functions. Here's an example of what it can look like:</p>
<pre>
<code class="javascript">
$("#makeMeScrollable").smoothDivScroll({autoScrollLeftLimitReached: function() {alert("Autoscroll left limit reached<br/>");}, movedToElementNumber: function(eventObj, data) {alert("Moved to element number " + data["elementNumber"] + ".<br/>");}
});
</code>
</pre>
<p>In the example above I've chosen to hook on to two of the callbacks: <b>autoScrollLeftLimitReached</b> and <b>movedToElementNumber</b>. All I do is throw up an alertbox, but you'd probably do other stuff in these functions. In the second callback you see an example where the callback not just triggers but also sends some data along, in this case the element number it moved to.</p>
<p><a href="#toc">Back to table of contents</a></p>
<h2><a name="thecss">The CSS</a></h2>
<p>There is a CSS that accompanies the Smooth Div Scroll jQuery plugin. It looks like this:</p>
<pre><code class="css">
/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */
/* Invisible left hotspot */
div.scrollingHotSpotLeft
{
	/* The hotspots have a minimum width of 75 pixels 
	   and if there is room the will grow and occupy 10% 
	   of the scrollable area (20% combined). 
	   Adjust it to your own taste. */
	min-width: 75px;
	width: 10%;
	height: 100%;
	/* There is a big background image and it's used to 
	solve some problems I experienced in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first cursor url is for Firefox and other 
	    browsers, the second is for Internet Explorer */
	cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;
}
/* Visible left hotspot */
div.scrollingHotSpotLeftVisible
{
	background-image: url(../images/arrow_left.gif);				
	background-color: #fff;
	background-repeat: no-repeat;
	/* Standard CSS3 opacity setting */
	opacity: 0.35; 
	/* Opacity for really old versions of 
	   Mozilla Firefox (0.9 or older) */
	-moz-opacity: 0.35;
	/* Opacity for Internet Explorer. */
	filter: alpha(opacity = 35);
	/* Use zoom to Trigger "hasLayout" in 
	   Internet Explorer 6 or older versions */	
	zoom: 1; 
}
/* Invisible right hotspot */
div.scrollingHotSpotRight
{
	min-width: 75px;
	width: 10%;
	height: 100%;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;
}
/* Visible right hotspot */
div.scrollingHotSpotRightVisible
{
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	opacity: 0.35;
	filter: alpha(opacity = 35);
	-moz-opacity: 0.35;
	zoom: 1;
}
/* The scroll wrapper is always the same width and 
   height as the containing element (div). Overflow 
   is hidden because you don't want to show all of 
   the scrollable area.
*/
div.scrollWrapper
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}
div.scrollableArea
{
	position: relative;
	width: auto;
	height: 100%;
}
</code></pre>
<a href="#toc">Back to table of contents</a>
<h2><a name="dependencies">Dependencies</a></h2>
<p>
<b>jquery.ui.widget.js</b><br/>
In version 1.0 large parts of the code has been rewritten from scratch. Smooth Div Scroll is now a stateful plugin based on the jQuery UI widget factory which enables nice stuff like public methods, the ability to alter options after the plugin has initialized and callbacks. Since it's based on the jQuery UI widget factory, you need to add the library component <b>jquery.ui.widget.js</b> to the page where you are using Smooth Div Scroll. The jQuery UI widget component is a part of the jQuery UI core library, but if you don't need all the other stuff in the jQuery UI library you can add only jquery.ui.widget.js as a stand-alone file to your page.
</p>
<p>Check out the <a href="http://51qianduan.com//">jQuery UI homepage</a> for more info and downloads.
</p>
<p>
<b>jQuery 1.4.x</b><br/>
Then of course you need to add a reference to the jQuery core library. I prefer to use the Google Libraries API to add jQuery to my page using a URL:
</p>
<blockquote>
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
</blockquote>
<p>
Check out the <a href="http://51qianduan.com">Google Libraries API page</a> for jQuery for more info on how to add it to your page.
</p>
<a href="#toc">Back to table of contents</a><br/>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 瀑布流 收藏 预览 自适应页面大小 响应式区块列表布局 摇摆 烟花 清单样式 照相机 注释 下划线 结构图 鼠标悬停 条形码 弹幕 画板 朋友圈样式 红包 css绘制样式 支付 图文布局 滚动导航菜单 滑动导航菜单 导航切换 二维码 滚动切换 滑动选项卡切换 地图 图片滚动 图片滑动 图片切换 计算器 文字滚动 文字滑动 文字切换 计时器 滑动手风琴 背景切换 桌面 图片文字滚动 滑动星星打分 手风琴 跳转 全屏滚动 选项卡自动切换 步骤 页面滚动 视频切换 键盘 列表切换 签到 分享 渐隐切换 点赞 投票 全屏切换 雪花 切换按钮 打印 缩放切换 答题 震动 图表 鼠标滑过 抽奖 表情 qq空间 头像截图 星星打分评分 编辑器 播放器 电子杂志 排行榜 分页翻页 排序 表格隔行变色 table表格 进度条 多功能 滚动流动 滑动滑过 滚动切换 滑动选项卡切换 自动滚动图片轮播 选项卡切换 滑动手风琴 滑动星星打分 其他更多

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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