您的位置: 首页  >  文章  >  jquery模拟动态更换壁纸

jquery模拟动态更换壁纸

分类: 文章 • 2025-03-22 13:03:21

文章目录

目录结构

jquery模拟动态更换壁纸

单个图片

jquery模拟动态更换壁纸

效果图

  • 图就不一一截了，类似四个象限那种全屏移动
    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>

说明

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

相关推荐