JS实现模拟新浪微博和腾讯微博首页滚动

最新推荐文章于 2021-03-17 02:36:51 发布

KingCruel

最新推荐文章于 2021-03-17 02:36:51 发布

阅读量984

点赞数

分类专栏： JavaScript 文章标签： JS实现模拟新浪微博和腾讯微博首页滚动

本文链接：https://blog.csdn.net/KingCruel/article/details/12048897

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>JS实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com</title>
    <style type="text/css">
    *{margin:0;padding:0}
    body{font:12px/1.8 Arial;color:#666;margin:0;height:100%;background:#333}
    .wrapper{padding:50px}
    ul,li{margin:0;padding:0;list-style:none}
    .wp{position:relative;width:800px;height:400px;overflow:hidden;margin:20px auto;border:4px solid #121212;background:#fff}
    .slider{position:absolute;width:760px;padding:0 20px;left:0;top:0}
    .slider li{padding:20px 0;border-bottom:1px dashed #ccc;overflow:hidden;width:100%}
    </style>
    <script type="text/javascript">
        function H$(i) {
            return document.getElementById(i)
        }
        function H$$(c, p) {
            return p.getElementsByTagName(c)
        }
        var slider = function () {
            function inits(o) {
                this.id = o.id;
                this.at = o.auto ? o.auto : 3;
                this.o = 0;
                this.pos()
            }
            inits.prototype = {
                pos: function () {
                    clearInterval(this.__b);
                    this.o = 0;
                    var el = H$(this.id),
                        li = H$$("li", el),
                        l = li.length;
                    var _t = li[l - 1].offsetHeight;
                    var cl = li[l - 1].cloneNode(true);
                    cl.style.opacity = 0;
                    cl.style.filter = "alpha(opacity=0)";
                    el.insertBefore(cl, el.firstChild);
                    el.style.top = -_t + "px";
                    this.anim()
                },
                anim: function () {
                    var _this = this;
                    this.__a = setInterval(function () {
                        _this.animH()
                    }, 20)
                },
                animH: function () {
                    var _t = parseInt(H$(this.id).style.top),
                        _this = this;
                    if (_t >= -1) {
                        clearInterval(this.__a);
                        H$(this.id).style.top = 0;
                        var list = H$$("li", H$(this.id));
                        H$(this.id).removeChild(list[list.length - 1]);
                        this.__c = setInterval(function () {
                            _this.animO()
                        }, 20)
                    } else {
                        var __t = Math.abs(_t) - Math.ceil(Math.abs(_t) * 0.07);
                        H$(this.id).style.top = -__t + "px"
                    }
                },
                animO: function () {
                    this.o += 2;
                    if (this.o == 100) {
                        clearInterval(this.__c);
                        H$$("li", H$(this.id))[0].style.opacity = 1;
                        H$$("li", H$(this.id))[0].style.filter = "alpha(opacity=100)";
                        this.auto()
                    } else {
                        H$$("li", H$(this.id))[0].style.opacity = this.o / 100;
                        H$$("li", H$(this.id))[0].style.filter = "alpha(opacity=" + this.o + ")"
                    }
                },
                auto: function () {
                    var _this = this;
                    this.__b = setInterval(function () {
                        _this.pos()
                    }, this.at * 1000)
                }
            };
            return inits
        }();

    </script>
</head>
<body>
    <h1 class="tit-h1">JS实现模拟新浪微博大厅和腾讯微博首页滚动效果 www.phpernote.com</h1>
    <div class="wrapper">
        <div class="wp">
            <ul id="slider" class="slider">
                <li>入山又恐别倾城  世间安得双全 不负如来不负卿 </li>
                <li>第一最好不相见，如此便可不相恋。 </li>
                <li>那一天 闭目在经殿香雾</li>
                <li>你见 或者不见我  我就在那里</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">new slider({ id: 'slider' });</script>
</body>
</html>

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现模拟新浪微博和腾讯微博首页滚动

JS实现模拟新浪微博和腾讯微博首页滚动效果_www.phpernote.com *{margin:0;padding:0} body{font:12px/1.8 Arial;color:#666;margin:0;height:100%;background:#333} .wrapper{padding:50px} ul,li{margin:0;paddi
复制链接

扫一扫

专栏目录