jquery模拟动态更换壁纸
文章目录
- 目录结构
- 单个图片
- 效果图
- 代码
- 说明
学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353
目录结构
单个图片
效果图
- 图就不一一截了，类似四个象限那种全屏移动
代码
<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>
说明
- 图片可以自己随意网上找
- 动画时间也可以自定义
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！