sliding

How does it work?

링크:  

http://www.smoothdivscroll.com/#quickdemo

http://slodive.com/freebies/best-jquery-slideshow-gallery-plugins/

The basic principle behind Smooth Div Scroll is simple: let one div (scrollableArea) scroll inside another div (scrollWrapper). Two hotspots are used to trigger the actual scrolling (scrollingHotSpotLeft andscrollingHotSpotRight). You can also let the user scroll using touch, the mouse wheel or just let the scroller auto scroll. The scrollWrapper determines how much of the scrollableArea that should be visible - everything outside the scrollWrapper is hidden from view.

Quick demo

Here's a quick demo of Smooth Div Scroll in action. I've set the options so the user can scroll using the hotspots or the mouse wheel . I've also told the scroller to start auto scrolling as soon as the page loads and stop auto scrolling as soon as the user interacts with the scoller. Touch scrolling is not enabled for this particular demo - check out the touch demo if you want to try touch scrolling.

The jQuery code for this particular demo looks like this:

<script type="text/javascript">
	$(document).ready(function () {
		$("#makeMeScrollable").smoothDivScroll({
			mousewheelScrolling: "allDirections",
			manualContinuousScrolling: true,
			autoScrollingMode: "onStart"
		});
	});
</script>

In this particular demo I've set some options that override the default options:

• mousewheelScrolling: "allDirections" - The user can scroll using the mouse wheel, both horizontally and vertically (not all mice have a vertical scrolling function though)
• manualContinuousScrolling: true - The scroller becomes endless in both directions when the user scrolls manually (using the hotspots or the mousewheel).
• autoScrollingMode: "onStart" - The scroller will start auto scrolling as soon as the page has loaded and stop auto scrolling as soon as the user interacts with the scoller.

I've used only a few of all the available options. You'll find all the options described here.) In the demo above the HTML-code looks like this:

	<div id="makeMeScrollable">
		<img src="images/demo/field.jpg" alt="Field" id="field" />
		<img src="images/demo/gnome.jpg" alt="Gnome" id="gnome" />
		<img src="images/demo/pencils.jpg" alt="Pencils" id="pencils" />
		<img src="images/demo/golf.jpg" alt="Golf" id="golf" />
		<img src="images/demo/river.jpg" alt="River" id="river" />
		<img src="images/demo/train.jpg" alt="Train" id="train" />
		<img src="images/demo/leaf.jpg" alt="Leaf" id="leaf" />
		<img src="images/demo/dog.jpg" alt="Dog" id="dog" />
	</div>

As you can see there is a surrounding div with the id makeMeScrollable. This is the element that I turn into a Smooth Div Scroll. Inside this div you can put any content - not just images.

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:

#makeMeScrollable div.scrollableArea *
{
	position: relative;
	display: block
	float: left;
	margin: 0;
	padding: 0;
	/* If you don't want the images in the scroller to be selectable, try the following
		block of code. It's just a nice feature that prevent the images from
		accidentally becoming selected/inverted when the user interacts with the scroller. */
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

In this example there's no space between the elements inside the scrollable area. If you want a space between them, use padding and not margin since margin tends to generate errors in Internet Explorer.