Using JavaScript to implement floating ads on a Web page

Source: Internet
Author: User
Tags diff eval time interval visibility

Roaming between the Web, you will find that the Internet is not only the ocean of information, but also the ocean of advertising. In addition to the ordinary GIF Banner, flash, floating advertising is the current online more popular form of advertising. When you drag the browser's scroll bar, the ad that floats on the page can be moved along with the screen. Although this effect is quite useful for advertising display, for those browsing your Web site, it is an impediment to reading and an interest in reading, so it must not be abused. However, if you can make good use of it, it can play a great role.

To make the effect of floating ads is not difficult, if you have the basis of JS can write their own, if the ligatures are too lazy to write, to download a special effects tool on the web, press the hint to paste the code on OK. However, want to really understand how it is done, you need to master some JS knowledge. Here to introduce a simple floating advertising practice.

The following code can be placed between <body></body>, during which I added some comments (i.e. "//" after text and "<!-" "-->").

<script For=window event=onload language= "JScript" >

Initad ()//load page, call function Initad ()

</SCRIPT>

<script language= "JScript" >

<!--

function Initad () {

Document.all.AdLayer.style.posTop = -200;//Set the onload event excitation after the ad layer relative to the fixed y direction position

document.all.AdLayer.style.visibility = ' visible '//Set layer to visible

Movelayer (' Adlayer ');//Call Function Movelayer ()

}

function Movelayer (layername) {

var x = 600;//Floating ad layer fixed to the position of the browser in the x direction

var y = 300;//floating ad layer fixed to 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 AD layer

SetTimeout ("Movelayer (' Adlayer ');", 20);//Set 20 milliseconds before calling function Movelayer ()

}

-->

</script>

<!--below is a layer with an ID of adlayer (for example, the ID name is not adlayer and the Adlayer in Movelayer () above should be modified accordingly), including a linked picture-->

<div id=adlayer style= ' Position:absolute; width:61px; height:59px; z-index:20; Visibility:hidden;; left:600px; top:300px ' >

<a ></a>

</div>

Here, you can set the value of x and Y to set the position of the fixed layer, and change the settimeout ("Movelayer (' Adlayer ');", 20) to the time interval that you want to invoke Movelayer (). It is also important to note that the best picture is a GIF with a transparent background, so that the background color of the picture does not cover the content behind it.

Remember, be cautious with floating ads, consider the use of special effects at the same time, must take into account the viewer's feelings, can not abuse Oh!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.