滚动的屏保
滚动的屏保
老的微软系统的屏幕保护可能会有这样的，按照他们的效果，我做了这样一个简陋版的滚动的图片，
当碰到屏幕，按一定方向返回。随着浏览器的大小变动，图片也能随着动。前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动屏保</title>
<style>
*{
margin: 0;
padding:0;
}
.demo{
/* position: absolute;
left: 0;
top: 0;*/
width: 150px;
height: 150px;
}
.demo>img{
width: 150px;
height:150px;
}
</style>
</head>
<body>
<div class="demo">
<img src="change.jpg">
</div>
</body>
</html>js代码
<script>
//获取div ， 定义它们的左上角坐标分别为disX,disY
var div = document.getElementsByTagName("div")[0];
div.style.position = "absolute";//设置它的定位方式为绝对定位
div.style.left = "0";
div.style.top = "0";
//获取浏览器的宽和高
var bWidth = window.innerWidth;
// console.log(bWidth);
var bHeight = window.innerHeight;
// console.log(bHeight);
var disX = 0,
disY = 0;
//设置一个变量flag控制左右移动
var flag1=false;
//设置一个变量flag控制上下移动
var flag2=false;
function scrol(){
//实时获取屏幕的宽，高
bWidth = window.innerWidth;
bHeight = window.innerHeight;
//把div坐标实时获取出来
disX = parseInt(div.style.left);
disY = parseInt(div.style.top);
// console.log(disX);
// console.log(disY);
//控制横向
if(disX>=bWidth-150){//图片块的右边碰到屏幕边框
flag1 = true;
}else if(disX<=0){
flag1 = false;
}
if(!flag1){
div.style.left = disX + 5 + "px";//让图片的坐标变化，也就是移动
}else if(flag1){
div.style.left = disX-5+"px";
}
//控制纵向
if(disY>=bHeight-150){//图片的下面碰到屏幕框
flag2 = true;
}else if(disY<=0){
flag2 = false;
}
if(!flag2){
div.style.top = disY + 5 + "px";
}else if(flag2){
div.style.top = disY-5+"px";
}
}
var timer= setInterval(scrol,20);//设置定时器
</script>总结
图片的移动，也就是图片坐标的变换，我刚开始做的时候是考虑到四个面，判断每个面是否碰到屏幕壁。这样做的坏处是，需要判断多次，也可能是按照固定的路线在走，一成不变。最后我想到了只考虑两个，横向和纵向。我只需要给他们标志位，当坐标大于等于屏幕壁(浏览器的边框)时，让他们的坐标实现加减就可以了。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018年11月06日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
