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

    1. <style>
    2.         .box {
    3.             margin: 0 auto;
    4.             width: 1000px;
    5.             height: 5000px;
    6.             box-shadow: 0 0 0 1px #000;
    7.             background-color: aquamarine;
    8.         }
    9.  
    10.         .bon {
    11.             width: 10000px;
    12.             height: 2000px;
    13.             margin: 0 auto;
    14.             box-shadow: 0 0 0 1px #000;
    15.             background-color: bisque;
    16.         }
    17.  
    18.         .foot {
    19.             width: 1000px;
    20.             height: 2000px;
    21.             margin: 0 auto;
    22.             box-shadow: 0 0 0 1px #000;
    23.             background-color: darkcyan;
    24.         }
    25.  
    26.         .abs {
    27.             position: absolute;
    28.             top: 400px;
    29.             transition: .4s;
    30.  
    31.         }
    32.  
    33.         a {
    34.             position: absolute;
    35.             top: 0;
    36.             right: 0;
    37.         }
    38.     style>
    39. head>
    40.  
    41. <body>
    42.     <div class="box">div>
    43.     <div class="bon">div>
    44.     <div class="foot">div>
    45.     <div class="abs">
    46.         <img src="./img/pic.jpg" alt="" class="img">
    47.         <a href="javascript:;" id="x">xa>
    48.     div>
    49. body>
    50. <script>
    51.     var odiv = document.querySelector(".abs");
    52.     var btn = document.getElementById("x");
    53.     window.onscroll = function () {
    54.         var top = document.documentElement.scrollTop; //获取当前滚动条位置
    55.         var left = document.documentElement.scrollLeft;
    56.         odiv.style.top = top + 400 + "px";
    57.         odiv.style.left = left + "px"
    58.     }
    59.     btn.onclick = function () {
    60.         odiv.style.display = "none";
    61.         setTimeout(() => {
    62.             odiv.style.display = "block";
    63.         }, 1000);
    64.     }
    65. script>

    图片素材icon-default.png?t=M7J4http://链接：https://pan.baidu.com/s/1lmEjwFnZB86UKGCYSxl4GQ?pwd=izbh 提取码：izbh

    1. <style>
    2.         .box img {
    3.             position: absolute;
    4.             top: 0;
    5.             left: 0;
    6.         }
    7.     style>
    8. head>
    9.  
    10. <body>
    11.     <div class="box">
    12.         <img src="./img/lu-0.png" alt="">
    13.     div>
    14. body>
    15. <script>
    16.     var odiv = document.querySelector(".box");
    17.     var oimg = document.querySelector(".box img");
    18.     var num = -1;
    19.     document.addEventListener("keydown", function (ev) {
    20.         // console.log(ev.keyCode);
    21.         switch (ev.keyCode) {
    22.             case 40:  //下
    23.             case 83:
    24.                 num++;
    25.                 oimg.src = "./img/down-" + num + ".png";
    26.                 if (num === 4) {
    27.                     num = 1;
    28.                 }
    29.                 oimg.style.top = oimg.offsetTop + 10 + "px";
    30.                 break;
    31.  
    32.             case 39: //右
    33.             case 68:
    34.                 num++;
    35.                 oimg.src = "./img/right-" + num + ".png";
    36.                 if (num === 4) {
    37.                     num = 1;
    38.                 }
    39.                 oimg.style.left = parseInt(getComputedStyle(oimg).left) + 10 + "px";
    40.                 break;
    41.             case 38: //上
    42.             case 87:
    43.                 num++;
    44.                 oimg.src = "./img/up-" + num + ".png";
    45.                 if (num === 4) {
    46.                     num = 1;
    47.                 }
    48.                 oimg.style.top = parseInt(getComputedStyle(oimg).top) - 10 + "px";
    49.                 break;
    50.             case 37: //左
    51.             case 65:
    52.                 num++;
    53.                 oimg.src = "./img/left-" + num + ".png";
    54.                 if (num === 4) {
    55.                     num = 1;
    56.                 }
    57.                 oimg.style.left = parseInt(getComputedStyle(oimg).left) - 10 + "px";
    58.                 break;
    59.         }
    60.     })
    61. script>

    源码2

    1. <style>
    2.         #pic {
    3.             position: absolute;
    4.             left: 300px;
    5.             top: 300px;
    6.         }
    7.     style>
    8. head>
    9.  
    10. <body>
    11.     <img src="./img/down-0.png" alt="" id="pic">
    12. body>
    13. <script>
    14.     var oImg = document.getElementById("pic");
    15.     var i = -1;
    16.  
    17.     document.addEventListener("keydown", function (ev) {
    18.         console.log(ev.keyCode);
    19.         switch (ev.keyCode) {
    20.             case 37:
    21.             case 65:
    22.                 oImg.style.left = oImg.offsetLeft - 10 + "px";
    23.                 changeImg("left");
    24.                 break;
    25.             case 38:
    26.             case 87:
    27.                 oImg.style.top = oImg.offsetTop - 10 + "px";
    28.                 changeImg("up");
    29.                 break;
    30.             case 39:
    31.             case 68:
    32.                 oImg.style.left = oImg.offsetLeft + 10 + "px";
    33.                 changeImg("right");
    34.                 break;
    35.             case 40:
    36.             case 83:
    37.                 oImg.style.top = oImg.offsetTop + 10 + "px";
    38.                 changeImg("down");
    39.                 break;
    40.         }
    41.     })
    42.  
    43.  
    44.     function changeImg(dir) {
    45.         i++;
    46.         if (i >= 5) {
    47.             i = 0;
    48.         }
    49.         oImg.src = "./img/" + dir + "-" + i + '.png';
    50.     }
    51.  
    52. script>

    鼠标拖动小滑块案例

    1. <style>
    2.         #box {
    3.             position: absolute;
    4.             width: 200px;
    5.             height: 200px;
    6.             background-color: #f00;
    7.         }
    8.     style>
    9. head>
    10.  
    11. <body>
    12.     <div id="box">div>
    13. body>
    14. <script>
    15.     var oDiv = document.getElementById("box");
    16.     oDiv.onmousedown = function (ev) {
    17.         // console.log(ev.clientX);
    18.         var rectX = ev.clientX - oDiv.offsetLeft;
    19.         var rectY = ev.clientY - oDiv.offsetTop;
    20.         document.onmousemove = function (ev) {
    21.             var left = ev.clientX - rectX;
    22.             var top = ev.clientY - rectY;
    23.             oDiv.style.left = left + 'px';
    24.             oDiv.style.top = top + 'px';
    25.         }
    26.         oDiv.onmouseup = function () {
    27.             document.onmousemove = null;
    28.         };
    29.     }
    30. script>

  • 相关阅读:
    (计算机组成原理)第三章存储系统-第四节2：固态硬盘SSD
    React技术栈支援Vue项目，你需要提前了解的
    EN 16069建筑物用隔热产品.工厂制造的聚乙烯泡沫（PEF）产品—CE认证
    WorldCoin 运营数据，业务安全分析
    Python三目运算符（三元运算符）用法详解（含Python代码）
    Python 使用openpyxl处理Excel文件
    3. 投票 案例项目（合集）
    SpringCloud 微服务接口限流的两种方式
    江淮500后桥壳体机械加工工艺及精镗两侧面孔工序夹具设计
    NPM 常用命令（五）
  • 原文地址：https://blog.csdn.net/m0_59642141/article/details/126431103