最简单的滚屏效果

Html

Css

ul,li {
	margin:0;
	padding:0
}
#scrollDiv {
	width:300px;
	height:100px;
	min-height:25px;
	line-height:25px;
	border:#ccc 1px solid;
	overflow:hidden
}
#scrollDiv li {
	height:25px;
	padding-left:10px;
}

(function($) {
    $.fn.extend({
        Scroll: function(opt, callback) {

if (!opt) var opt = {};
            var _this = this.eq(0).find("ul:first");
            var lineH = _this.find("li:first").height(),
                line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10),
                speed = opt.speed ? parseInt(opt.speed, 10) : 500,
                timer = opt.timer ? parseInt(opt.timer, 10) : 3000;
            if (line == 0) line = 1;
            var upHeight = 0 - line * lineH;

scrollUp = function() {
                _this.animate({
                    marginTop: upHeight
                }, speed, function() {
                    for (i = 1; i <= line; i++) {
                        _this.find("li:first").appendTo(_this);
                    }
                    _this.css({
                        marginTop: 0
                    });
                });
            }

_this.hover(function() {
                clearInterval(timerID);
            }, function() {
                timerID = setInterval("scrollUp()", timer);
            }).mouseout();
        }
    })
})(jQuery);

$(document).ready(function() {
    $("#scrollDiv").Scroll({
        line: 4,
        speed: 500,
        timer: 3000
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

最简单的滚屏效果



代码描述：用jQuery实现最简单的滚屏效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

爷，@风靡全球%

相关代码

最简单的滚屏效果

最新