jquery模拟动态更换壁纸

上山打老虎

目录结构

单个图片

效果图

图就不一一截了，类似四个象限那种全屏移动

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>自动屏保</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
    }
    
    .box {
      position: relative;
      width: 100%;
      height: 100%;
    }
    
    .page {
      position: absolute;
      width: 100%;
      height: 100%;
    }
    
    .no1 {
      top: 0%;
      left: 0%;
      background: url("img/bg1.jpg")
    }
    
    .no2 {
      top: 0%;
      left: 100%;
      background: url("img/bg2.jpg")
    }
    
    .no3 {
      top: 100%;
      left: 0%;
      background: url("img/bg3.jpg")
    }
    
    .no4 {
      top: 100%;
      left: 100%;
      background: url("img/bg4.jpg")
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="page no1"></div>
    <div class="page no2"></div>
    <div class="page no3"></div>
    <div class="page no4"> </div>
  </div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    autoChange(); //页面初始化 
    setInterval(autoChange, 1000) //定时调用
      //原理就是子绝父相，更改父元素的top和left值
    function autoChange() {
      $(".box").animate({
        "top": "0%",
        "left": "-100%"
      }, 2000).animate({
        "top": "-100%",
        "left": "0%"
      }, 2000).animate({
        "top": "-100%",
        "left": "-100%"
      }, 2000).animate({
        "top": "0%",
        "left": "0%"
      }, 2000)
    }
  </script>
</body>

</html>

说明

图片可以自己随意网上找
动画时间也可以自定义

[jQuery] jquery模拟动态更换壁纸

相关帖子

win7系统电脑更换锁屏壁纸的方法

word文档目录怎么设置目录的点设置方法

word目录链接页码怎么设置目录链接页码设置方法

Win11壁纸在哪个文件夹可以找到？

pdf怎么制作目录页

pdf文件怎么制作目录

【云原生】如何快速部署Kubernetes

使用lsd 和 exa 来重新想象和设计你的文件和目录列表

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

上山打老虎 LV4

[jQuery] jquery模拟动态更换壁纸

相关帖子

win7系统电脑更换锁屏壁纸的方法

word文档目录怎么设置 目录的点设置方法

word目录链接页码怎么设置 目录链接页码设置方法

Win11壁纸在哪个文件夹可以找到？

pdf怎么制作目录页

pdf文件怎么制作目录

【云原生】如何快速部署Kubernetes

使用lsd 和 exa 来重新想象和设计你的文件和目录列表

使用HTML/CSS/JS做一个恋爱计时小挂件

常用jquery右健禁止命令

上山打老虎 LV4

word文档目录怎么设置目录的点设置方法

word目录链接页码怎么设置目录链接页码设置方法