<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jerory's code</title>
<style>
.float_x {
cursor: pointer;
color: #000;
margin: 3 0 3 0;
font-size: 12px;
text-align: center;
border: 1px solid gray;
border-radius: 50%;
width: 18px;
height: 16px;
margin-top: -113px;
position: absolute;
margin-left: 195px;
}
.float_div{
position: absolute;
left: 311; top: 815;visibility :hidden;
border:0px solid #000;
width:200px;
height:100px;
}
.float_img{
width:100%;height:100%;
cursor:pointer;
border-radius:5px;
}
</style>
</head>
<body>
<div id="img" class="float_div" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="right">
<img class="float_img" src="https://s2.ax1x.com/2019/11/12/M1l3l9.jpg" onclick="javascript:window.open('http://www.baidu.com');" onload="return imgzoom(this,550)" />
<div class="float_x" onclick="clearInterval(interval);img.style.visibility = 'hidden'">
X
</div>
</div>
<script language="javascript">
var xPos = document.body.clientWidth;
//var yPos = document.body.clientHeight;
var yPos = 20;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.style.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
</script>
</body>
</html>
