li上下滚动
li上下滚动
皮蛋瘦肉精_ 发表于2年前
li上下滚动
  • 发表于 2年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

备忘录--------------------

<script type="text/javascript" src="/${res}/js/company/jquery.min.js"></script>

<script type="text/javascript" src="/${res}/js/scrollQ.js"></script>


<script type="text/javascript">

$(document).ready(function(){  

    $("#sItem1").scrollQ();  

});

</script>

<ul id="sItem1">

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

<li style="line-height: 25px;">${text}</li>

</ul>


scrollQ.js:


/** 

 *  

 * li上下滚动插件

 * line 显示li行数 

 * scrollNum 每次滚动li行数

 * scrollTime 滚动速度 单位毫秒

 */ 

(function($){  

    var status = false;  

    $.fn.scrollQ = function(options){  

        var defaults = {

            line:4,

            scrollNum:2,

            scrollTime:3000

        }

var options=jQuery.extend(defaults,options);

var _self = this;

return this.each(function(){  

var i=0;

$("li",this).each(function(){

i++;

$(this).css("display","none");

})

                        // 如果总行数小于显示行数,ul会被清空,所以做了如下判断。 比较懒,就这样。

if(i<=defaults.line){

$("li",this).each(function(){

$(this).css("display","block");

});

return;

}

$("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); 


共有 人打赏支持
粉丝 0
博文 7
码字总数 985
×
皮蛋瘦肉精_
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: