小广告特效 向上滚动

1. html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>向上滚动</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            color: 12px;
        }

        .wrap {
            margin: 200px;
            width: 500px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            border: 1px solid red;
        }
        .wrap li {
            padding-left: 10px;
            background-color: #ccc;
        }
    </style>

</head>

<body>
    <div class="wrap">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>

    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/upLine.js"></script>


</body>

</html>
View Code

2. upLine.js

(function ($) {
    $.fn.extend({
        upLine: function (ops) {
            var opsDefault = {
                line: 1,
                speed: 1000,
                timer: 3000
            };
            var ops = $.extend({}, opsDefault, ops);
            var timer;
            var wrap = this.eq(0).find("ul:first");
            var lineH = wrap.find("li:first").height();    
            var upHeight =-ops.line * lineH;
            scrollUp = function () {
                wrap.animate({
                    marginTop: upHeight
                }, ops.speed, function () {
                    for (i = 1; i <= ops.line; i++) {
                        wrap.find("li:first").appendTo(wrap);
                    }
                    wrap.css({
                        marginTop: 0
                    });
                });
            };

            var run = function () {
                timer = setInterval(scrollUp, ops.timer);
            };

            wrap.hover(function () {
                clearInterval(timer);
            }, function () {
                run();
            });

            run();
        }
    });
})(jQuery);


$(".wrap").upLine({
    line: 1,
    speed: 1000,
    timer: 2000
});
View Code

3. 知识点

var ops = $.extend({}, opsDefault, ops);
var lineH = wrap.find("li:first").height();  
wrap.animate({          marginTop: upHeight        }                           upHeight  负值
wrap.find("li:first").appendTo(wrap);
wrap.hover(function () {       inFn()      }, function () {        outFn();      });
for (i = 1; i <= ops.line; i++) {            wrap.find("li:first").appendTo(wrap);          }                   支持多行

 

posted @ 2019-04-15 19:39  justSmile2  阅读(108)  评论(0)  编辑  收藏  举报
喵