<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
*{
margin: 0px;
padding: 0px;
}
div{
position: absolute;
top: 0px;
left: 0px;
width: 128px;
height: 128px;
}
#img{
width:100%;
height: 100%;
}
</style>
</head>
<body>
<div id="imgid">
<img src="b.png" id="img">
</div>
<script type="text/javascript">
imgidobj=document.getElementById('imgid');
imgidobjHeight=128;
imgidobjWidth=128;
//获取可视区域的高
screenHeight=document.documentElement.clientHeight;
//获取可视区域的宽
screenWidth=document.documentElement.clientWidth;
//可视区域的高减去图片高度=可活动区域高度
diffHeight=screenHeight-imgidobjHeight;
diffWidth=screenWidth-imgidobjWidth;
ys=0;
yv=30;
xs=0;
xv=30;
setInterval(function(){
ys+=yv;
if (ys>=diffHeight) {
ys=diffHeight;
yv=-yv;
}
if (ys<=0) {
yv=-yv;
}
imgidobj.style.top=ys+'px';
xs+=xv;
if (xs>=diffWidth) {
xs=diffWidth;
xv=-xv;
}
if (xs<=0) {
xv=-xv;
}
imgidobj.style.left=xs+'px';
},100);
</script>
</body>
</html>
440
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
