文字上下滚动特效

最新推荐文章于 2023-11-01 22:53:57 发布

tianhe8

最新推荐文章于 2023-11-01 22:53:57 发布

阅读量872

点赞数

CC 4.0 BY-SA版权

分类专栏： js技术文章标签： js 特效

本文链接：https://blog.youkuaiyun.com/mytianhe/article/details/9849865

js技术专栏收录该内容

7 篇文章

订阅专栏

这段代码展示了如何使用jQuery扩展方法实现文字上下滚动的特效。通过定义滚动速度、滚动行数和间隔时间，可以自定义滚动效果。当鼠标悬停在元素上时，滚动会暂停，离开后继续滚动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、文字上下滚动特效

<head>
    <title></title>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
    <style type="text/css">
        .list {
            height: 100px;
            text-overflow-y: hidden;
            overflow: hidden;
            width: 300px;
            border: 1px solid #000;
            padding:0 5px;
        }
        .active{background:#b00;color:#fff;}
    </style>
</head>
<body>
<div id="list">
    <div>生活,　一半是回忆,　一半是继续~~</div>
    <div>对自己苛刻，疲##惫....从来不想责怪别人，只想做好自己，也从来都是我的不对。</div>
    <div>前进、前进、再前进！哈哈</div>
    <div>人生如戏~！何必在意...</div>
    <div>找份开心的工作过早上8点到晚上18点，找个喜欢的女人过晚上18点到早上8点。这就是生活</div>
    <div>宁可高傲的发霉，也不低调的凑合。我们，那被逼出来的成熟~</div>
</div>
<script type="text/javascript">
    var $ = $ || window;
    $.get = function (expr) {
        function clsMatcher(className){
            return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }
        var e = typeof expr == "string" ? document.getElementById(expr) : expr;
        var elem = {
            dom:e,
            addClass:function(className) {
                var oldCls = e.className;
                e.className = !oldCls ?
                        className :
                        clsMatcher(className).test(oldCls) ?
                                oldCls : [oldCls,className].join(" ");
                return this;
            },remove:function() {
                e.parentNode && e.parentNode.removeChild(e);
                return this;
            },removeClass:function(className){
                e.className =(e.className||"").replace(clsMatcher(className),"$1$2");
                return this;
            },on:function(type, callback) {
                if (window.attachEvent)
                    e.attachEvent("on" + type, callback);
                else
                    e.addEventListener(type, callback, false);
                return this;
            },first:function(type) {
                var children = e.childNodes;
                for (var k = 0; k < children.length; k++) {
                    if (children[k].nodeType == 3)
                        continue;
                    if (!type || children[k].tagName.toLowerCase() == type.toLowerCase())
                        return $.get(children[k]);
                }
            },appendTo:function(parent){
                var p=parent.dom||parent;
                p.appendChild(e);
                return this;
            }
        };
        var directions = ["Left","Top"];
        for (var i = 0; i < directions.length; i++) {
            var method = "scroll" + directions[i];
            elem[method] = function(val) {
                return arguments.length ? e[method] = val : e[method];
            };
        }
        var sides = ["Width","Height"];
        for (var i = 0; i < sides.length; i++) {
            var side = sides[i];
            elem[side.toLowerCase()] = function(val) {
                if (arguments.length) {
                    e.style[side.toLowerCase()] = val + "px";
                    return this;
                }
                return e["offset" + side] || e[side];
            }
        }
        return elem;
    };
    function Timer(c) {
        var thread;
        var delay = c.delay || 200;
        var runner = c.run || typeof c == "function" ? c : function() {
        };
        this.start = function() {
            !thread && (thread = window.setInterval(runner, delay));
            return this;
        }
        this.stop = function() {
            var snapshot = thread;
            thread = null;
            snapshot && window.clearInterval(snapshot);
            return this;
        }

    }
    var list = $.get("list").addClass("list");
    var increment = 5;
    var timer = new Timer(function() {
        var offset = list.scrollTop();
        var first = list.first().addClass('active');
        if (offset >= first.height()) {
            list.first().removeClass('active').remove().appendTo(list);
            list.scrollTop(increment);
        } else {
            list.scrollTop(Math.min(offset + increment,first.height()));
        }
    });
    timer.start();
    list.on("mouseover", timer.stop).on("mouseout", timer.start);

</script>

特效二：

<div class="hotitem" id="scrollDiv" style="height:196px;min-height:25px;line-height:25px;overflow:hidden;">
                    <ul class="tuwenul">
                       <s:iterator value="produceLists">
                         <li class="yixin">
                            <div class="bankicon">
                                <img src="${ctx}/member/shop/showInstitutionLogo.do?institutionId=<s:property value='feLspImManager.feLspImInstitutionId'/>" width="32" height="32" />
                            </div>
                              <div class="name"><s:property value="produceName"/></div>
                              <div class="tiaojian"><span style="color:#F9692C;"><s:property value="productSlogan"/></span></div>
                              <input name="" type="button" onclick="xianshi('<s:property value="feLspImProductId" />')" />
                         </li>
                       </s:iterator>
                    </ul>s
            </div>