Roaming around the Internet, you will find that the Internet is not only an ocean of information, but also an ocean of advertisements. In addition to ordinary Gif Banner and Flash, floating ads are also one of the more popular forms of advertising on the Internet nowadays. When you drag the browser's scroll bar, this kind of floating advertisement on the page can move with the screen. Although this effect has considerable practical value for advertising display, for people browsing your webpage, this is something that both hinders reading and affects reading interest, so it must not be abused. However, if you use it wisely, it can be extremely useful.
It is not difficult to create the effect of a floating advertisement. If you have a basic knowledge of JS, you can write one yourself. If you are too lazy to write, download a special effects tool online and paste the code as prompted. However, if you want to really understand how it is made, you need to master some JS knowledge. Here I will introduce to you a simple floating advertisement method.
The following code can be placed between <body></body>, during which I added some comments (i.e. the text after "//" and the text between "<!—" and "-->").
<SCRIPT FOR=window EVENT=onload LANGUAGE="JScript">
initAd();//After loading the page, call the function initAd()
</SCRIPT>
<script language="JScript">
<!--
function initAd() {
document.all.AdLayer.style.posTop = -200;//Set the position of the ad layer relative to the fixed y direction after the onLoad event is fired.
document.all.AdLayer.style.visibility = 'visible'//Set the layer to be visible
MoveLayer('AdLayer');//Call function MoveLayer()
}
function MoveLayer(layerName) {
var x = 600; //The floating advertising layer is fixed at the x-direction position of the browser
var y = 300; //The floating advertising 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 advertising layer
setTimeout("MoveLayer('AdLayer');", 20);//Set 20 milliseconds before calling function MoveLayer()
}
//-->
</script>
<!--The following is a layer with the ID name AdLayer (if the ID name is not AdLayer, the AdLayer in MoveLayer() above must also be modified accordingly), including a picture with a link -->
<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'>
<a href=" http://www.5dmedia.com/bbs"><img src='../qqkk2000.gif' border="0" height="60" width="60"></a>
</div>
Here, you can set the x and y values to set the position of the fixed layer, and change the value of 20 in setTimeout("MoveLayer('AdLayer');", 20) to the value you want to call MoveLayer() time interval. It should also be noted that the picture used is preferably a gif with a transparent background so that the background color of the picture does not obscure the content behind it.
Remember, use floating ads with caution. When considering the use of special effects, you must also take the viewer's feelings into consideration and do not abuse them!