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">
<Html>
<Head>
<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; 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.css Float)
{
OneButton.style.css Float = "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> logs document.doc umentElement. clientWidth-oneInner.offsetWidth | lefts <= 0)
{
X =-x
}
If (tops> export document.doc umentElement. clientHeight-oneInner.offsetHeight | tops <= 0)
{
Y =-y
}
Tops + = y;
Lefts + = x;
OneInner. style. top = tops + "px"
OneInner. style. left = lefts + "px"
}
// Stop by hovering
OneInner. onmouseover = function (){
ClearInterval (a1a );
}
// Let go and continue the exercise
OneInner. onmouseout = function (){
A1a = setInterval (moves, 100 );
}
// Delete
OneButton. onclick = function (){
Document. body. removeChild (oneInner );
}
}
</Script>
</Head>
<Body>
</Body>
</Html>
Jquery method:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<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 to stop the motion
$ ("# MoveWindow"). mouseover (function (){
ClearInterval (move );
});
// Move the mouse away
$ ("# MoveWindow"). mouseout (function (){
Move = setInterval (move, 100 );
});
// Click the button to close
$ ("# RemoveMW"). click (function (){
$ ("# MoveWindow"). remove ();
});
})
</Script>
</Head>
<Body>
</Body>
</Html>
Basic Ideas:
1. After the page is loaded, insert a window to the page, and insert a close button to the window.
2. Use the setInterval () function to trigger the moves () function to start the animation.
3. moves function: first obtain the current window position, and then shift the window over time. When the window is displaced to the edge of the browser, the system reversely moves.
4. Add other events: hover the mouse over to stop the movement, move the mouse away to continue the movement, and click the button to close the window.
Ps: This special effect is not recommended to affect user experience.
Hope to help you! Pai_^ !~~