After the page loads, insert the window into the page, then insert the Close button into the window, and use the SetInterval () function to trigger the moves () function to start the animation
JS Method:
Copy CodeThe code is as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> New Document </title>
<meta name= "Generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<script type= "Text/javascript" >
Window.onload=function () {
Write
var Oneinner = document.createelement ("div");
Oneinner.setattribute ("style", "Background: #663398;p osition: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);
Timer
var A1A = setinterval (moves,100);
Function
var x = 10;
var y = 10;
function moves () {
var tops = Oneinner.offsettop
var lefts = Oneinner.offsetleft
if (lefts>=document.documentelement.clientwidth-oneinner.offsetwidth| | lefts<=0)
{
x=-x
}
if (tops>=document.documentelement.clientheight-oneinner.offsetheight| | tops<=0)
{
y=-y
tops+=y;
lefts+=x;
oneinner.style.top=tops+ "px"
oneinner.style.left=lefts+ "px"
}
Hover stop
Oneinner.onmouseover=function () {
Clearinterval (A1A);
}
Let go and keep moving.
Oneinner.onmouseout=function () {
A1A =setinterval (moves,100);
}
Delete
Onebutton.onclick=function () {
Document.body.removeChild (Oneinner);
}
}
</script>
<body>
</body>
jquery Method:
Copy CodeThe code is as follows:
<! DOCTYPE html>
<title></title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= "Http://www.jb51.net/workspace/js/jquery-1.7.min.js" ></script>
<script>
$ (function () {
Write Div
$ ("<div/>", {ID: "MoveWindow"}). css ({width: "200px", Height: "200px", Border: "Solid 3px #2F74A7", Background: "# 663398 ", Position:" Absolute ", cursor:" pointer "}). AppendTo (" body ");
Write Close button
$ ("<div/>", {ID: "REMOVEMW"}). css ({width: "20px", Height: "20px", Background: "Red", Float: "Right"}). AppendTo ("# MoveWindow ");
Timer
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<=0)
{
X=-x
}
if (tops>=$ (window). Height ()-$ ("#moveWindow"). Height () | | tops<=0)
{
Y=-y
}
Lefts+=x;
Tops+=y;
$ ("#moveWindow"). Offset ({top:tops,left:lefts});
}
Hover stop Motion
$ ("#moveWindow"). MouseOver (function () {
Clearinterval (move);
});
Move away from the mouse and continue moving
$ ("#moveWindow"). Mouseout (function () {
move = SetInterval (moves,100);
});
Click the button to close
$ ("#removeMW"). Click (function () {
$ ("#moveWindow"). Remove ();
});
})
</script>
<body>
</body>
JS implementation of Suspension Mobile window (suspended ads) effects