- /**
- *
- * jQuery scrollQ plugin li上下滚动插件
- * @name jquery-scrollQ.js
- * @author Q
- * @date 2012-03-23
- * line 显示li行数
- * scrollNum 每次滚动li行数
- * scrollTime 滚动速度 单位毫秒
- *
- */
- (function($){
- var status = false;
- $.fn.scrollQ = function(options){
- var defaults = {
- line:4,
- scrollNum:2,
- scrollTime:1000
- }
- var options=jQuery.extend(defaults,options);
- var _self = this;
- return this.each(function(){
- $("li",this).each(function(){
- $(this).css("display","none");
- })
- $("li:lt("+options.line+")",this).each(function(){
- $(this).css("display","block");
- })
- function scroll() {
- for(i=0;i<options.scrollNum;i++) {
- var start=$("li:first",_self);
- start.fadeOut(100);
- start.css("display","none");
- start.appendTo(_self);
- $("li:eq("+(options.line-1)+")",_self).each(function(){
- $(this).fadeIn(500);
- $(this).css("display","block");
- })
- }
- }
- var timer;
- timer = setInterval(scroll,options.scrollTime);
- _self.bind("mouseover",function(){
- clearInterval(timer);
- });
- _self.bind("mouseout",function(){
- timer = setInterval(scroll,options.scrollTime);
- });
- });
- }
- })(jQuery);
调用方式如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML xmlns="http://www.w3.org/1999/xhtml">
- <HEAD>
- <TITLE>test</TITLE>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7/jquery.min.js"></script>
- <script type="text/javascript" src="scrollQ.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#sItem").scrollQ();
- });
- </script>
- </head>
- <body>
- <div>
- <ul id="sItem">
- <li>标题1</li>
- <li>标题2</li>
- <li>标题3</li>
- <li>标题4</li>
- <li>标题5</li>
- <li>标题6</li>
- <li>标题7</li>
- <li>标题8</li>
- <li>标题9</li>
- <li>标题10</li>
- </ul>
- </div>
- </body>
- </html>