文字连续向上循环滚动

最新推荐文章于 2023-06-29 17:13:22 发布

ljx896779016

最新推荐文章于 2023-06-29 17:13:22 发布

阅读量406

点赞数

CC 4.0 BY-SA版权

分类专栏： asp.net mvc 文章标签： jquery 文字滚动 ViewUI

本文链接：https://blog.youkuaiyun.com/ljx896779016/article/details/84552104

asp.net mvc 专栏收录该内容

8 篇文章

订阅专栏

view 代码例子：

<div id="de" style="overflow:hidden; width:128px; height:300px;">
        <div id="de1">
            <ul class="right-middle">
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
                <li>
                    <p>
                        <a href="" class="avatar" target="_blank">
                            <img src="/Images/product/pic1.jpg" alt="javascript的类型转换规则">
                        </a>
                        <span>原文地址Javascript类型转换的规则</span>
                    </p>
                </li>
            </ul>
        </div>
        <div id="de2"></div>
</div>

javascript 实现滚动效果：

<script>
    var dome = document.getElementById("de");
    var dome1 = document.getElementById("de1");
    var dome2 = document.getElementById("de2");
    var speed = 50;//设置向上轮动的速度  
    dome2.innerHTML = dome1.innerHTML;//复制节点  
    function moveTop() {
        if (dome1.offsetHeight - dome.scrollTop <= 0) {
            dome.scrollTop = 0;
        } else {
            dome.scrollTop++;
        }
    }
    var myFunction = setInterval("moveTop()", speed);
    dome.onmouseover = function () {
        clearInterval(myFunction);
    };
    dome.onmouseout = function () {
        myFunction = setInterval(moveTop, speed);
    };
</script>