zoukankan html css js c++ java

小广告特效向上滚动

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); } 支持多行

查看全文

相关阅读:
数据库
 计算机基础知识系列
 《大话数据结构》参考
 数据结构与算法系列
 python cookbook
Python教程廖雪峰
 Python入门学习系列
 认识 React——声明式，高效且灵活的用于构建用户界面的 JavaScript 库
 线程---同步（synchronized）
线程---插队和礼让执行（join和yield）

原文地址：https://www.cnblogs.com/justSmile2/p/10712602.html

小广告特效 向上滚动

小广告特效向上滚动