图片滚动效果——上下

最新推荐文章于 2024-10-27 09:45:09 发布

-childs

最新推荐文章于 2024-10-27 09:45:09 发布

阅读量1.6w

点赞数 1

分类专栏： asp.net 文章标签： asp.net

本文链接：https://blog.csdn.net/song737732045/article/details/52206892

版权

asp.net 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<h2>下面是向上滚动</h2>
    <div id="colee" style="overflow: hidden; height: 200px; width: 600px; margin-left: 300px;">
        <div id="colee1">
            <p><img src="Image/1.png"></p>
            <p><img src="Image/2.png"></p>
            <p><img src="Image/3.png"></p>
            <p><img src="Image/4.png"></p>
        </div>
        <div id="colee2"></div>
    </div>
    <script>
        var speed = 10;//设置的数字越大滚动的越慢
        var colee2 = document.getElementById("colee2");
        var colee1 = document.getElementById("colee1");
        var colee = document.getElementById("colee");
        colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2
        function Marquee1() {
            //当滚动至colee1与colee2交界时
            if (colee2.offsetTop - colee.scrollTop <= 0) {
                colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端
            } else {
                colee.scrollTop++;
            }
        }

var MyMar1 = setInterval(Marquee1, speed); //设置定时器
        //鼠标移上时清除定时器达到滚动停止的目的
        colee.onmouseover = function () { clearInterval(MyMar1) }
        //鼠标移开时重设定时器
        colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }
    </script>
    
<br>

<h2>下面是向下滚动</h2>
    <div id="colee_bottom" style="overflow: hidden; height: 200px; width: 600px; margin-left: 300px;">
        <div id="colee_bottom1">
            <p><img src="Image/1.png"></p>
            <p><img src="Image/2.png"></p>
            <p><img src="Image/3.png"></p>
            <p><img src="Image/4.png"></p>
        </div>
        <div id="colee_bottom2"></div>
    </div>
<script>
    var speed = 30;//这里设置为30 与上面对比
    var colee_bottom2 = document.getElementById("colee_bottom2");
    var colee_bottom1 = document.getElementById("colee_bottom1");
    var colee_bottom = document.getElementById("colee_bottom");
    colee_bottom2.innerHTML = colee_bottom1.innerHTML;
    colee_bottom.scrollTop = colee_bottom.scrollHeight;

    function Marquee2() {
        if (colee_bottom1.offsetTop - colee_bottom.scrollTop >= 0)
            colee_bottom.scrollTop += colee_bottom2.offsetHeight;
        else {
            colee_bottom.scrollTop--;
        }
    }

    var MyMar2 = setInterval(Marquee2, speed);
    colee_bottom.onmouseover = function() { clearInterval(MyMar2) }
    colee_bottom.onmouseout = function() { MyMar2 = setInterval(Marquee2, speed) }
</script>