首先写css样式
html,body,#box{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: url('./img/timg.jpg');
background-size:100% 100%;
border-radius: 50%
}
html 布局简单布局
<divid=“box”>
<divid=“app”></ div>
</ div>
重点 js代码
window.onload = function () {
// js 第一步先获取元素
var oApp = document.getElementById('app');
var oWidth = document.documentElement.clientWidth-100;
var oHeight = document.documentElement.clientHeight-100;
// 设置一个开关,防止点击两次
var flog = true;
//事件绑定到body
document.body.onclick = function (){
// 开关为 true的时候执行函数
if(flog){
drag();
}
flog = false;
}
function drag(){
//开始 left top都是为0的 创建一个对象 x 为left y为 top;
var arr ={
x:0,
y:0,
oSeedx:ran(-5,5),//left 随机的运动方向
oSeedy:ran(-5,5);//top 随机的运动方向
};
setInterval(() => {
arr.y+=arr.oSeedy;
arr.x+=arr.oSeedx;
// 当left的值小于0的,就数去屏幕了 所以把oSeedx的值 乘以-1 正的就便成负的 负的话就便成正的
if(arr.x<=0){
arr.x = 0;
arr.oSeedx *=-1;
}
if(arr.y <= 0){
arr.y = 0;
arr.oSeedy *= -1;
}
if(arr.x >=oWidth ){
arr.x = oWidth;
arr.oSeedx *= -1
}
if(arr.y >= oHeight){
arr.y = oHeight;
arr.oSeedy *=-1;
}
//把每次改变后的值 添加到盒子里
oApp.style.top = arr.y +'px';
oApp.style.left = arr.x +'px';
} , 30)
}
// 随机数的函数
function ran(m,n){
return parseInt(Math.random()*(m-n)+n);
}
}
全部代码
<!DOCTYPE html >
<html lang="en">
<head>
<style>
html,body,#box{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#app{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
background: url('./img/timg.jpg');
background-size:100% 100%;
border-radius: 50%
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
var oApp = document.getElementById('app');
var oWidth = document.documentElement.clientWidth-100;
var oHeight = document.documentElement.clientHeight-100;
var flog = true;
document.body.onclick = function (){
if(flog){
drag()
}
flog = false;
}
function drag(){
var arr ={
x:0,
y:0,
oSeedx:ran(-5,5),
oSeedy:ran(-5,5)
};
setInterval(() => {
arr.y+=arr.oSeedy;
arr.x+=arr.oSeedx;
if(arr.x<=0){
arr.x = 0;
arr.oSeedx *=-1;
}
if(arr.y <= 0){
arr.y = 0;
arr.oSeedy *= -1;
}
if(arr.x >=oWidth ){
arr.x = oWidth;
arr.oSeedx *= -1
}
if(arr.y >= oHeight){
arr.y = oHeight;
arr.oSeedy *=-1;
}
oApp.style.top = arr.y +'px';
oApp.style.left = arr.x +'px';
} , 30)
}
function ran(m,n){
return parseInt(Math.random()*(m-n)+n);
}
}
</script>
</head>
<body>
<div id="box">
<div id="app"></div>
</div>
</body>
</html>
本文章为个人写的 没有转载!!!!