js实现广告条+缓冲效果/键盘事件实现小人跑步

最新推荐文章于 2022-11-22 11:34:00 发布

和蔼的阿木木o

最新推荐文章于 2022-11-22 11:34:00 发布

阅读量242

点赞数

分类专栏： js 文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_59642141/article/details/126431103

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

<style>
        .box {
            margin: 0 auto;
            width: 1000px;
            height: 5000px;
            box-shadow: 0 0 0 1px #000;
            background-color: aquamarine;
        }

        .bon {
            width: 10000px;
            height: 2000px;
            margin: 0 auto;
            box-shadow: 0 0 0 1px #000;
            background-color: bisque;
        }

        .foot {
            width: 1000px;
            height: 2000px;
            margin: 0 auto;
            box-shadow: 0 0 0 1px #000;
            background-color: darkcyan;
        }

        .abs {
            position: absolute;
            top: 400px;
            transition: .4s;

        }

        a {
            position: absolute;
            top: 0;
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <div class="bon"></div>
    <div class="foot"></div>
    <div class="abs">
        <img src="./img/pic.jpg" alt="" class="img">
        <a href="javascript:;" id="x">x</a>
    </div>
</body>
<script>
    var odiv = document.querySelector(".abs");
    var btn = document.getElementById("x");
    window.onscroll = function () {
        var top = document.documentElement.scrollTop; //获取当前滚动条位置
        var left = document.documentElement.scrollLeft;
        odiv.style.top = top + 400 + "px";
        odiv.style.left = left + "px"
    }
    btn.onclick = function () {
        odiv.style.display = "none";
        setTimeout(() => {
            odiv.style.display = "block";
        }, 1000);
    }
</script>

图片素材http://链接：https://pan.baidu.com/s/1lmEjwFnZB86UKGCYSxl4GQ?pwd=izbh 提取码：izbh

<style>
        .box img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./img/lu-0.png" alt="">
    </div>
</body>
<script>
    var odiv = document.querySelector(".box");
    var oimg = document.querySelector(".box img");
    var num = -1;
    document.addEventListener("keydown", function (ev) {
        // console.log(ev.keyCode);
        switch (ev.keyCode) {
            case 40:  //下
            case 83:
                num++;
                oimg.src = "./img/down-" + num + ".png";
                if (num === 4) {
                    num = 1;
                }
                oimg.style.top = oimg.offsetTop + 10 + "px";
                break;

            case 39: //右
            case 68:
                num++;
                oimg.src = "./img/right-" + num + ".png";
                if (num === 4) {
                    num = 1;
                }
                oimg.style.left = parseInt(getComputedStyle(oimg).left) + 10 + "px";
                break;
            case 38: //上
            case 87:
                num++;
                oimg.src = "./img/up-" + num + ".png";
                if (num === 4) {
                    num = 1;
                }
                oimg.style.top = parseInt(getComputedStyle(oimg).top) - 10 + "px";
                break;
            case 37: //左
            case 65:
                num++;
                oimg.src = "./img/left-" + num + ".png";
                if (num === 4) {
                    num = 1;
                }
                oimg.style.left = parseInt(getComputedStyle(oimg).left) - 10 + "px";
                break;
        }
    })
</script>

源码2

<style>
        #pic {
            position: absolute;
            left: 300px;
            top: 300px;
        }
    </style>
</head>

<body>
    <img src="./img/down-0.png" alt="" id="pic">
</body>
<script>
    var oImg = document.getElementById("pic");
    var i = -1;

    document.addEventListener("keydown", function (ev) {
        console.log(ev.keyCode);
        switch (ev.keyCode) {
            case 37:
            case 65:
                oImg.style.left = oImg.offsetLeft - 10 + "px";
                changeImg("left");
                break;
            case 38:
            case 87:
                oImg.style.top = oImg.offsetTop - 10 + "px";
                changeImg("up");
                break;
            case 39:
            case 68:
                oImg.style.left = oImg.offsetLeft + 10 + "px";
                changeImg("right");
                break;
            case 40:
            case 83:
                oImg.style.top = oImg.offsetTop + 10 + "px";
                changeImg("down");
                break;
        }
    })


    function changeImg(dir) {
        i++;
        if (i >= 5) {
            i = 0;
        }
        oImg.src = "./img/" + dir + "-" + i + '.png';
    }

</script>

鼠标拖动小滑块案例

<style>
        #box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>
<script>
    var oDiv = document.getElementById("box");
    oDiv.onmousedown = function (ev) {
        // console.log(ev.clientX);
        var rectX = ev.clientX - oDiv.offsetLeft;
        var rectY = ev.clientY - oDiv.offsetTop;
        document.onmousemove = function (ev) {
            var left = ev.clientX - rectX;
            var top = ev.clientY - rectY;
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
        }
        oDiv.onmouseup = function () {
            document.onmousemove = null;
        };
    }
</script>