js method: Copy code The code is as follows: New Document <br> window.onload=function(){<br> //写入<br> var oneInner = document.createElement("div");<br> oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;");<br> var oneButton = document.createElement("input");<br> oneButton.setAttribute("type","button");<br> oneButton.setAttribute("value","x");<br> if (oneButton.style.cssFloat)<br> {<br> oneButton.style.cssFloat="right"<br> }<br> else<br> {oneButton.style.styleFloat="right"}<br> oneInner.appendChild(oneButton);<br> document.body.appendChild(oneInner);<br><br> //定时器<br> var a1a = setInterval(moves,100);<br> //函数 <p> var x = 10;<br> var y = 10;</p> <p> function moves(){<br> var tops = oneInner.offsetTop<br> var lefts = oneInner.offsetLeft</p> <p> if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts<=0)<BR> {<BR> x=-x<BR> }</P><P> if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops<=0)<BR> {<BR> y=-y<BR> }<br><br> tops =y;<BR> lefts =x;</P> <P> oneInner.style.top=tops "px"<BR> oneInner.style.left=lefts "px"<BR> }</P> <P> //悬停停止<BR> oneInner.onmouseover=function(){<BR> clearInterval(a1a);<BR> }<BR> //放手继续运动<BR> oneInner.onmouseout=function(){<BR> a1a =setInterval(moves,100);<BR> }<BR> //删除<BR> oneButton.onclick=function(){<BR> document.body.removeChild(oneInner);<BR> }<BR> }<BR> jquery方法： 复制代码 代码如下: <br> $(function(){<br> //写入div<br> $("<div/>",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body");<br> //写入关闭按钮<br> $("<div/>",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow");<br> //定时器<br> var move = setInterval(moves,100);<br> var x= 10;<br> var y= 10;<br><br> function moves (){<br> var mw = $("#moveWindow").offset();<br> var lefts =mw.left;<br> var tops = mw.top; <p> if (lefts>=$(window).width()-$("#moveWindow").width()||lefts<=0)<BR> {<BR> x=-x<BR> }</P><P> if (tops>=$(window).height()-$("#moveWindow").height()||tops<=0) y=-y<br> <br> lefts =x; <br> }<br> > //Remove the mouse and continue the movement ").click(function(){<br> </head> ;<br> <body><br> </body><br></html><br><br><br> <br>Basic idea: <br> <br>1. After the page is loaded, insert a window into the page, and then insert a close button into the window <br> <br>2. Use the setInterval() function to trigger the moves() function to start animation<br> <br>3.moves function: First obtain the current window position, then displace the window over time, and move in the opposite direction whenever the displacement reaches the edge of the browser <br> <br>4. Add other events: stop the movement when the mouse hovers, continue the movement when the mouse leaves, click the button to close the window <br> <br>ps: It is not recommended to use this special effect, it will affect the user experience<br> <br>Hope it helps! ^_^!~~<br></p> </div>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
