Recently, I made a small project to add a floating window to the web page, which tested the basic CSS and JS technology. The code is as follows (part of the code comes from reference, see the bottom)
<!DOCTYPE html> <html> <head> <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> </head> <style> *{ padding: 0; margin: 0; } body { height: 900px; background-color: white; } .fl { width: 200px; height: 100px; background-color:white; position: fixed; } div { border-style:solid; border-top-color:#84C1FF; border-top-width:22px; } </style> <body> <div id="fl"> <b>Be careful:</b> "border-top-width" No effect if used alone. First use "border-style" Property settings borders. </div> </body> <script language=javascript> var fl = document.getElementById('fl'); var chroX = document.documentElement.clientWidth;//The whole height and width of yemian var chroY = document.documentElement.clientHeight; var offsetLeft = fl.offsetLeft;//Location of the box var offsetTop = fl.offsetTop; var timer = 0;//Starting stopwatch is 0 //console.log(offsetTop) var x = 1;//One move at a time var y = 1; window.onresize = function(){ chroX = document.documentElement.clientWidth;//The whole height and width of yemian chroY = document.documentElement.clientHeight; } function move(){ offsetLeft += x; offsetTop += y; fl.style.left = offsetLeft + 'px'; fl.style.top = offsetTop + 'px'; //console.log(chroY) } window.onload = function(){ timer = setInterval(function(){ move(); if(offsetTop+200 > chroY || offsetTop < 0){ y = -y; } if(offsetLeft+200 > chroX || offsetLeft <0){//Move in the opposite direction if it is less than 200 from the page border x = -x; } },30)//Adjust the speed, the larger the interval (number), the slower } fl.onmouseenter = function(){ clearInterval(timer) //Mouse on float window to stop moving } fl.onmouseleave = function(){//Move the mouse away and start moving again window.onload(); } </script> </html>
The general idea is to set a timer to display the window again every time. Because your coordinates are different and the refresh time is in milliseconds, it shows a floating window effect.
Quote: https://blog.csdn.net/qq_22849785/article/details/93596680