滚动条与图片移动

<html>
<title>xxx</title>

<head></head>

<body>
    <div id="out" style="width:100%;height:1300px;position: absolute;">
        <hr />
        <div style="width:100%;height:100%">
            <img id="sImg" src="../Pictures/th.jpg" style="width:1200px;height:400px;position:absolute" />
        </div>
    </div>
</body>
<script>
    var yValue = 0;
    window.onscroll = scrollBottomOrTop;
    function scrollBottomOrTop() {
        if (yValue > window.scrollY) {
            var temp = yValue - window.scrollY
            move(temp);
        } else {
            var temp = yValue - window.scrollY
            move(temp);
        }
        yValue = window.scrollY;
        console.log(yValue);
    }

    var img = document.getElementById("sImg");
    img.top = 0;
    function move(k) {
        if (k > 0) {
            img.top = img.top - Math.abs(k);
        } else {
            img.top = img.top + Math.abs(k);
        }

        return img.style.top = img.top + 'px';
    }
</script>

</html>

posted @ 2020-12-27 19:13 robinloveslife 阅读(106) 评论(0) 编辑收藏举报

刷新页面返回顶部

学无止境

悟已往之不谏

滚动条与图片移动

公告