首先,要缕一缕思路:
第一步,怎样实现图片自动移动;
第二步,怎么实现图片碰到浏览器边框后折返;
第三步,怎么实时获得浏览器边框的大小;
实现第一步与第二步:
var num=0; //移动的距离,下一行同理;
var num1=0;
var flg=true; //设置一个变量,配合三元表达式使用,实现折返的效果,下一行同理;
var flg1=true;
//判断让其上下移动
if(num<=0){flg=true;num=0}
if(num>=shang){flg=false;num=shang}
flg?num+=2:num-=2;
//判断让其左右移动
if(num1<=0){flg1=true;num1=0}
if(num1>=zuo){flg1=false;num1=zuo}
flg1?num1+=2:num1-=2;
实现第三步:
需要一个定时函数,就可以实时获取浏览器的宽度
setTimeout(fun,10)
function fun(){
zuo = document.documentElement.clientWidth-129;
shang = document.documentElement.clientHeight-295;
setTimeout(fun,10)
}
下面的就是全部代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
//这个很重要,去掉这个会出bug
body{
overflow: hidden;
}
img{
width:129px;
height:295px;
/* position:absolute;
top:0;
left:0; */
}
</style>
</head>
<body>
<img src="https://www.shijie.center/dong.gif" alt=""/>
<script>
var img =document.querySelector('img');
var num=0; //移动的距离,下一行同理;
var num1=0;
var flg=true; //设置一个变量,配合三元表达式使用,实现折返的效果,下一行同理;
var flg1=true;
(function fun(){
zuo = document.documentElement.clientWidth-129;
shang = document.documentElement.clientHeight-295;
setTimeout(fun,10)
//判断让其上下移动
if(num<=0){flg=true;num=0}
if(num>=shang){flg=false;num=shang}
flg?num+=2:num-=2;
//判断让其左右移动
if(num1<=0){flg1=true;num1=0}
if(num1>=zuo){flg1=false;num1=zuo}
flg1?num1+=2:num1-=2;
img.style.marginTop=num+'px';
img.style.marginLeft=num1+'px';
})()
</script>
</body>
</html>