文字连续向上循环滚动

iViOLeTi 2014-04-22

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>

相关推荐

greent00 / 0评论 2020-05-29