1. 程式人生 > 實用技巧 >滾動條與圖片移動

滾動條與圖片移動

<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>