特效描述:利用jquery实现 自动滚动 下拉列表框。利用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 & 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 & 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 <select> 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 <select>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>