纯js实现页面漂浮图

mac2025-08-10  7

js代码

var xPos = 700; var yPos = 300; 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; img1.style.top = yPos; function changePos() { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; Hoffset = img1.offsetHeight; Woffset = img1.offsetWidth; img1.style.left = xPos + document.documentElement.scrollLeft + "px"; img1.style.top = yPos + document.documentElement.scrollTop + "px"; 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() { img1.visibility = "visible"; interval = setInterval('changePos()', delay); } function pause_resume() { if(pause) { clearInterval(interval); pause = false;} else { interval = setInterval('changePos()',delay); pause = true; } } start();

html页面

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> #img1 { position: absolute; } </style> </head> <body> <div id="img1"> <img src="image/ewm.png" width="100" height="100" border="0"> </div> <script src="js/piaofu.js" type="text/javascript" charset="utf-8"></script> </body>
最新回复(0)