A simple way to implement floating ads on web pages using JavaScript

Home

Web Front-end

JS Tutorial

A simple way to implement floating ads on web pages using JavaScript_javascript skills

May 16, 2016 pm 05:32 PM

advertise float Web page

Walking 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 "<!—" "-->" text between).

Copy code The code is as follows:

　 <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 ad layer relative to the fixed y-direction position 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 ad layer is fixed at the x-direction position of the browser
　var y = 300;//The floating ad layer is fixed at the y-direction position 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()
 }
 //-->
 The AdLayer in MoveLayer() 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.jb51.net"><img src=../qqkk2000.gif border= "0" height="60" width="60"></a> 
　 </div>

Here, you can set the values of x and y to set Set the position of the fixed layer and change the value of 20 in setTimeout("MoveLayer(AdLayer);", 20) to the time interval you want to call MoveLayer(). 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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn