Home > Others

jquery to achieve the top of the home page scalable AD special effects code _jquery

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Special Effects Introduction

Wheat Bag Home Top advertising Code imitation Wheat bag Home top telescopic ad jquery ad code. After the page load completes, the 2.5 seconds will automatically enlarge the advertisement display, the page content automatically extends downward. Show 8.5 seconds to automatically retract, put small display.

Demo diagram

How to use

1, copy the following CSS style to the head of your HTML:

Copy Code code as follows:

<link rel=stylesheet type=text/css href= "Css/style.css" >

2, copy the following code to the top of the entire page, that is, <body> below.

<div style= "margin:0px auto; width:960px; Display:block "id=js_ads_banner_top>
  <a href="/"Target=_blank></a>
</DIV>
<div style= "margin:0px auto; width:960px; Display:none "id=js_ads_banner_top_slide>
  <a href="/"Target=_blank></a>
</DIV>
<script type=text/javascript src= "jquery/ Jquery-1.8.3.min.js "> </SCRIPT>
<script type=text/javascript src=" Js/js.js "> </SCRIPT>

3, JS Code Analysis (js.js):

if ($ ("#js_ads_banner_top_slide"). Length) {  //To determine whether the current advertisement is expanded, if not, execute the following code
  var $slidebannertop = $ ("#js_ads_ Banner_top_slide "), $bannertop = $ (" #js_ads_banner_top ");
  settimeout (function () {$bannertop. slideup (1000); $slidebannertop. Slidedown (1000);},2500); After 2500 milliseconds (2.5 seconds), the ad is retracted, the advertisement is stretched out, and the execution time is 1 seconds (1000 milliseconds)
  settimeout (function () {$slidebannertop. Slideup (1000,function ()) {$bannertop. Slidedown (1000);});},8500); After 8.5 seconds (8500 milliseconds), the big ad is withdrawn and the small ads are launched.
}

This site download demo address

The above mentioned is the entire content of this article, I hope you can enjoy.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More