前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >滚动的屏保

滚动的屏保

作者头像
微醺
发布2019-01-17 13:14:08
1.7K0
发布2019-01-17 13:14:08
举报
文章被收录于专栏:有脑子的搬砖工

滚动的屏保

代码语言:javascript
复制
      老的微软系统的屏幕保护可能会有这样的,按照他们的效果,我做了这样一个简陋版的滚动的图片,
当碰到屏幕,按一定方向返回。随着浏览器的大小变动,图片也能随着动。
前端代码
代码语言:javascript
复制
<!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代码
代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 滚动的屏保
    • 前端代码
      • js代码
      • 总结
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档