JS realizes the special effects of floating mobile windows (floating advertisements)_javascript skills

js method:

Copy code The code is as follows: New Document window.onload=function(){ //写入 var oneInner = document.createElement("div"); oneInner.setAttribute("style","background:#663398;position:absolute;width:100px;height:100px;border:solid 3px #2F74A7;cursor:pointer;"); var oneButton = document.createElement("input"); oneButton.setAttribute("type","button"); oneButton.setAttribute("value","x"); if (oneButton.style.cssFloat) { oneButton.style.cssFloat="right" } else {oneButton.style.styleFloat="right"} oneInner.appendChild(oneButton); document.body.appendChild(oneInner);

//定时器 var a1a = setInterval(moves,100); //函数 var x = 10; var y = 10;

function moves(){ var tops = oneInner.offsetTop var lefts = oneInner.offsetLeft

if (lefts>=document.documentElement.clientWidth-oneInner.offsetWidth||lefts { x=-x }

if (tops>=document.documentElement.clientHeight-oneInner.offsetHeight||tops { y=-y }

tops =y; lefts =x;

oneInner.style.top=tops "px" oneInner.style.left=lefts "px" }

//悬停停止 oneInner.onmouseover=function(){ clearInterval(a1a); } //放手继续运动 oneInner.onmouseout=function(){ a1a =setInterval(moves,100); } //删除 oneButton.onclick=function(){ document.body.removeChild(oneInner); } }

jquery方法：

复制代码 代码如下: $(function(){ //写入div $(" ",{id:"moveWindow"}).css({width:"200px",height:"200px",border:"solid 3px #2F74A7",background:"#663398",position:"absolute",cursor:"pointer"}).appendTo("body"); //写入关闭按钮 $(" ",{id:"removeMW"}).css({width:"20px",height:"20px",background:"red",float:"right"}).appendTo("#moveWindow"); //定时器 var move = setInterval(moves,100); var x= 10; var y= 10;

function moves (){ var mw = $("#moveWindow").offset(); var lefts =mw.left; var tops = mw.top; if (lefts>=$(window).width()-$("#moveWindow").width()||lefts { x=-x }

if (tops>=$(window).height()-$("#moveWindow").height()||tops lefts =x; } > //Remove the mouse and continue the movement ").click(function(){

Basic idea:

1. After the page is loaded, insert a window into the page, and then insert a close button into the window

2. Use the setInterval() function to trigger the moves() function to start animation

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

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

ps: It is not recommended to use this special effect, it will affect the user experience

Hope it helps! ^_^!~~