Home > Developer > JavaScript
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>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> floating image </title>
<Script type = "text/javascript">
Var step = 1; // move the pixel
Var y =-1; // the vertical movement direction.-1 indicates upward, and 1 indicates downward.
Var x = 1; // the direction of horizontal movement.-1 indicates left, and 1 indicates right.
Function myFloat ()
{
Var img = document. getElementById ("myImg ");
// Obtain the image and the top margin of the current browser window. The value obtained by img. style. top is in px Unit.
Var top = img. style. top. replace ("px ","");
// Top = top-100;
// Img. style. top = top + "px ";
// Obtain the image and the left margin of the current browser window
Var left = img. style. left. replace ("px ","");
// Left = left-100;
// Img. style. left = left + "px ";
// Move up/down
If (top <= 0)
{
Y = 1;
}
If (top> = document. body. clientHeight)
{
Y =-1;
}
Top = (top * 1) + (step * y );
Img. style. top = top + "px ";
// Move left and right
If (left <= 0)
{
X = 1;
}
// Alert (img. clientWidth );
If (left> = (document. body. clientWidth-img. clientWidth ))
{
X =-1;
}
Left = (left * 1) + (step * x );
Img. style. left = left + "px ";
SetTimeout ("myFloat ()", 20 );
}
</Script>
</Head>
<Body onload = "myFloat ();" style = "height: 400px;">
Style = "position: absolute; left: 500px; top: 400px; border: solid 1px black;"/>
</Body>
</Html>
Another Implementation Method
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> floating ad instance </title>
<Script type = "text/javascript">
Var pos = 10;
Function toueme (){
Document. getElementById ("toubiao"). style. display = "none ";
}
Function initArray (){
This. length = initArray. arguments. length;
For (var I = 0; I <this. length; I ++ ){
This [I] = initArray. arguments [I];
}
}
Var col = new initArray ("4b", "5b", "8b", "8b ");
Col [0] = "yellow ";
Col [1] = "coral ";
Col [2] = "orange ";
Col [3] = "red ";
Col [4] = "greenyellow ";
Col [5] = "lime ";
Col [6] = "turquoise ";
Col [7] = "coral ";
Col [8] = "bluevilet ";
Col [9] = "violet ";
Function chgCol (){
Pos ++;
If (pos <0 | pos> 9 ){
Pos = 0;
}
Document. bgColor = col [pos];
SetTimeout ("chgCol ()", 500 );
}
</Script>
</Head>
<Body bgColor = "# ffffff" onload = "chgCol (); pingpong ();">
<DIV id = img1
Style = "Z-INDEX: 100;
LEFT: 12px;
WIDTH: 159px;
POSITION: absolute;
TOP: 143px;
HEIGHT: 161px;
Visibility: visible; ">
<Div id = toubiao>
<A style = "CURSOR: hand" onClick = toueme ()>
Src = "close.gif"
Width = 84 height = 11 hspace = "6" border = 0> </a>
</Div>
<A href = "#" target = "_ blank">
</A>
</DIV>
<SCRIPT>
Var xPos = 0;
Var yPos = 0;
Var step = 3;
Var delay = 100;
Var height = 0;
Var Hoffset = 0;
Var Woffset = 0;
Var yon = 0;
Var xon = 0;
Var pause = true;
Var interval;
Img1.style. top = yPos;
Function changePos ()
{
Width = document. body. clientWidth; // obtain the browser width.
Height = document. body. clientHeight; // obtain the height of the browser.
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
Img1.style. left = xPos + document. body. scrollLeft;
Img1.style. top = yPos + document. body. scrollTop;
If (yon)
{YPos = yPos + step ;}
Else
{YPos = yPos-step ;}
If (yPos <0)
{Yon = 1; yPos = 0 ;}
If (yPos> = (height-Hoffset ))
{Yon = 0; yPos = (height-Hoffset );}
If (xon)
{XPos = xPos + step ;}
Else
{XPos = xPos-step ;}
If (xPos <0)
{Xon = 1; xPos = 0 ;}
If (xPos> = (width-Woffset ))
{Xon = 0; xPos = (width-Woffset );}
}
Function start ()
{
Img1.visibility = "visible ";
Interval = setInterval ('changepos () ', delay );
// Interval = setTimeout ("changePos ()", delay );
}
Function pause_resume ()
{
If (pause)
{
ClearInterval (interval );
Pause = false ;}
Else
{
Interval = setInterval ('changepos () ', delay );
Pause = true;
}
}
Start ();
</SCRIPT>
</Body>
</Html>
JS achieves rapid increase of bubbles from Water
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> rapid increase of bubbles from water in JS </title>
<Style type = "text/css">
Body {cursor: crosshair; margin: 0; padding: 0; position: absolute; overflow: hidden; background: # FFF; left: 0; top: 0; width: 100%; height: 100% ;}
</Style>
<Script type = "text/javascript">
Var object = new Array ();
Nbfm = 60;
Var xm = 0;
Var ym = 9999;
Var nx = 0;
Var ny = 0;
Function movbulb (){
With (this ){
If (ec <20 ){
If (Math. abs (x0-xm) <100 & Math. abs (y0-ym) <100 ){
Xx = (xm-x0)/8;
Yy = (ym-y0)/8;
Ec ++;
}
}
Xx * = 0.99;
Y * = 0.99;
X0 = Math. round (x0 + Math. cos (y0/15) * p) + xx;
Y0 + = yy-v;
If (y0 <-h * 2 | x0 <-w * 2 | x0> nx + w * 2 ){
Y0 = ny + N + h * 2;
X0 = nx/2-100 + Math. random () * 100;
Ec = 0;
}
Obj. style. top = y0-h;
Obj. style. left = x0-w;
}
}
Function CObj (N, img, w, h ){
This. obj = document. createElement ("img ");
This. obj. src = img. src;
This. obj. style. position = "absolute ";
This. obj. style. left =-1000;
Document. body. appendChild (this. obj );
This. N = N;
This. x0 = 0;
This. y0 =-1000;
This. v = 1 + Math. round (80/h) * Math. random ());
This. p = 1 + Math. round (w/8) * Math. random ());
This. xx = 0;
This. yy = 0;
This. ec = 0;
This. w = w;
This. h = h;
This. movbulb = movbulb;
}
Function resize (){
Nx = document. body. offsetWidth;
Ny = document. body. offsetHeight;
}
Onresize = resize;
Document. onmousemove = function (e ){
If (window. event) e = window. event;
Xm = document. body. scrollLeft + (e. x | e. clientX );
Ym = document. body. scrollTop + (e. y | e. clientY );
}
Function run (){
For (I in object) object [I]. movbulb ();
SetTimeout (run, 16 );
}
Onload = function (){
PIC = document. getElementById ("bubbles"). getElementsByTagName ("img ");
Resize ();
For (nbf = 0; nbf <nbfm; nbf ++ ){
Sf = PIC [nbf % PIC. length];
Object [nbf] = new CObj (nbf, sf, sf. width/2, sf. height/2 );
}
Run ();
}
</Script>
</Head>
<Body>
<Div id = "bubbles" style = "visibility: hidden">
</Div>
</Body>
</Html>
Floating Advertisement
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> floating advertisement </title>
</Head>
<Body style = "background-color: pink">
<Div id = "ad" style = "position: absolute">
<A href = http://www.baidu.com target = "_ blank">
<Input type = "button" value = "Close Window" onclick = "closeWindow ()"/> <! -- Applies to IE browsers -->
</A>
</Div>
<Script type = "text/javascript">
Var x = 400, y = 300
Var xin = true, yin = true
Var step = 1
Var delay = 25
Var obj = document. getElementById ("ad ")
Function floatAD ()
{
Var L = T = 0
Var R = document. body. clientWidth-obj.offsetWidth
Var B = document. body. clientHeight-obj.offsetHeight
Obj. style. left = x + document. body. scrollLeft
Obj. style. top = y + document. body. scrollTop
X = x + step * (xin? 1:-1)
If (x <L) {xin = true; x = L}
If (x> R) {xin = false; x = R}
Y = y + step * (yin? 1:-1)
If (y <T) {yin = true; y = T}
If (y> B) {yin = false; y = B}
}
Var itl = setInterval ("floatAD ()", delay)
Function closeWindow ()
{
Window. close ();
}
</Script>
<Style type = "text/css">
Input {
Background-image: url(638.jpg );
Border: 0px;
Margin: 0px;
Padding: 0px;
Height: 23px;
Width: 82px;
Font-size: 14px;
}
</Style>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
