利用jquery实现自动滚动下拉列表框

代码结构

1. 引入CSS

<link rel="stylesheet" media="screen" href="css/style.css" />
<link rel="stylesheet" media="screen" href="js/ScrollectBox/scrollectbox.css" />

2. 引入JS

<script src="js/jquery-1.3.2.min.js"></script>
<script src="js/ScrollectBox/jquery.scrollectbox-1.0.js"></script>

3. HTML代码

	</a>
	<h1>ScrollectBar examples</h1>
	<div class="container">
		<h2>A basic scrollable drop-down menu (scroll by clicking)</h2>
		<div class="demo-dropdown-1" title="Navigate this page">
			<a href="#top">Page top</a>
			<a href="#page-heading">ScrollectBox heading</a>
			<a href="#Downloads">Downloads</a>
			<a href="#Examples">Examples</a>
			<a href="#Usage">Usage</a>
			<a href="#Releases">Releases</a>
			<a href="#Feedback">Feedback &#038; Development</a>
			<a href="#comments">Comments</a>
			<a href="#pings">Trackbacks</a>
			<a href="#respond">Leave a reply</a>
		</div>
	</div>
	<div class="clear"></div>
	<div class="container">
		<h2>Customized drop-down menu (show/hide on click/blur, scroll when scroll buttons are being hovered), including custom event handler</h2>
		<div class="demo-dropdown-2" title="Navigate this page">
			<a href="#top">Page top</a>
			<a href="#page-heading">ScrollectBox heading</a>
			<a href="#Downloads">Downloads</a>
			<a href="#Examples">Examples</a>
			<a href="#Usage">Usage</a>
			<a href="#Releases">Releases</a>
			<a href="#Feedback">Feedback &#038; Development</a>
			<a href="#comments">Comments</a>
			<a href="#pings">Trackbacks</a>
			<a href="#respond">Leave a reply</a>
		</div>
	</div>
	<div class="clear"></div>
	<div class="container">
		<h2>A scrollable, stylable &lt;select&gt; element (scroll using mouse wheel)</h2>
		<select class="demo-select-1" name="some_option">
			<option>Choose an option</option>
			<option value="1">Option 1</option>
			<option value="2">Option 2</option>
			<option value="3">Option 3</option>
			<option value="4">Option 4</option>
			<option value="5">Option 5</option>
			<option value="6">Option 6</option>
			<option value="7">Option 7</option>
			<option value="8">Option 8</option>
			<option value="9">Option 9</option>
			<option value="10">Option 10</option>
			<option value="11">Option 11</option>
		</select>
	</div>
	<div class="clear"></div>
	<div class="container">
		<h2>A complete form with all &lt;select&gt;s ported to ScrollectBoxes</h2>
		<form action="" method="GET" id="demo-form">
			<p><label for="sel1">Select 1</label></p>
			<select name="sel1">
				<option>Choose an option</option>
				<optgroup label="Category 1">
					<option value="1-1">Cat 1 Opt 1</option>
					<option value="1-2">Cat 1 Opt 2</option>
					<option value="1-3">Cat 1 Opt 3</option>
					<option value="1-4">Cat 1 Opt 4</option>
				</optgroup><optgroup label="Category 2">
					<option value="2-1">Cat 2 Opt 1</option>
					<option value="2-2">Cat 2 Opt 2</option>
					<option value="2-3">Cat 2 Opt 3</option>
				</optgroup><optgroup label="Category 3">
					<option value="3-1">Cat 3 Opt 1</option>
					<option value="3-2">Cat 3 Opt 2</option>
					<option value="3-3">Cat 3 Opt 3</option>
					<option value="3-4">Cat 3 Opt 4</option>
					<option value="3-5">Cat 3 Opt 5</option>
				</optgroup>
			</select>
			<div class="clear"></div>
			<p><label for="sel2">Select 2</label></p>
			<select name="sel2">
				<option>Choose another option</option>
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
				<option value="4">Option 4</option>
				<option value="5">Option 5</option>
				<option value="6">Option 6</option>
				<option value="7">Option 7</option>
				<option value="8">Option 8</option>
				<option value="9">Option 9</option>
				<option value="10">Option 10</option>
				<option value="11">Option 11</option>
				<option value="12">Option 12</option>
			</select>
			<div class="clear"></div>
			<p><input type="submit" value="Submit" class="submit-btn" /></p>
		</form>
	</div>
<div style="text-align:center;clear:both">
</div>