jquery模拟动态更换壁纸
2023-09-27 14:26:50 时间
学习资源推荐 https://blog.csdn.net/qq_42813491/article/details/90213353
目录结构
单个图片
效果图
- 图就不一一截了,类似四个象限那种全屏移动
代码
<!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-获取父级元素parent
- jQuery实现的简单文字提示效果模拟title(转)
- ***使用jQuery实现跨域提交表单数据
- 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换
- js--模拟jquery选择器
- jQuery拖动调整表格列宽度-resizableColumns
- 一款基于jquery超炫的弹出层提示消息
- jquery下载保存文件
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)
- jQuery-easyui实现关闭全部tabs
- webpack3如何正确引用并使用jQuery库