Home > Developer > JavaScript
Roaming Between networks, you will find that the Internet is not only the ocean of information, but also the ocean of advertising. In addition to common Gif Banner and Flash, floating advertisements are also one of the most popular online advertisements. When you drag the browser's scroll bar, the advertisement floating on the page can move along with the screen. Although this effect is of great practical value for advertisement display, for those who browse your webpage, this is something that hinders reading and affects reading interests. Therefore, it must not be abused. However, if you can make good use of it, it can play a significant role.
It is not difficult to make a floating advertisement. If you have a JS foundation, you can write one by yourself. If you are too lazy to write one, download a special effect tool from the Internet, paste the code as prompted. However, to really understand how it is made, you need to master some JS knowledge. Here we will introduce a simple floating advertisement practice.
The following code can be placed between <body> </body>, during which I add some comments (that is, the text after "//" and "<! -"--> ).
Copy codeThe Code is as follows:
<Script for = window EVENT = onload LANGUAGE = "JScript">
InitAd (); // after loading the page, call the initAd () function ()
</SCRIPT>
<Script language = "JScript">
<! --
Function initAd (){
Document. all. AdLayer. style. posTop =-200; // After the onLoad event is triggered, the advertising layer is opposite to the fixed position in the y direction.
Document. all. AdLayer. style. visibility = visible // set the layer to visible
MoveLayer (AdLayer); // call the MoveLayer () function ()
}
Function MoveLayer (layerName ){
Var x = 600; // The floating ad layer is fixed in the x direction of the browser
Var y = 300; // The floating ad layer is fixed in the y direction of the browser.
Var diff = (document. body. scrollTop + y-document. all. AdLayer. style. posTop) *. 40;
Var y = document. body. scrollTop + y-diff;
Eval ("document. all." + layerName + ". style. posTop = y ");
Eval ("document. all." + layerName + ". style. posLeft = x"); // Mobile Ad Layer
SetTimeout ("MoveLayer (AdLayer);", 20); // call the MoveLayer () function after 20 milliseconds ()
}
// -->
</Script>
<! -- The following is a layer whose ID is AdLayer (for example, if the ID name is not AdLayer, The AdLayer in MoveLayer () must be modified accordingly), including a picture with links -->
<Div id = AdLayer style = position: absolute; width: 61px; height: 59px; z-index: 20; visibility: hidden; left: 600px; top: 300px>
<A href = "http://www.jb51.net"> </a>
</Div>
Here, you can set the values of x and y to set the position of the fixed layer and change setTimeout ("MoveLayer (AdLayer);", 20) the value of 20 indicates the interval at which you want to call MoveLayer. It is also worth noting that it is best to use a gif image with a transparent background so that the background color of the image does not cover the subsequent content.
Remember to use floating advertisements with caution. When considering special effects, you must consider the viewer's feelings and never abuse them!
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
