jQuery implements ad display and hide animation
|
We often see ads appear after a few seconds and then disappear. Let's use the JQuery framework to implement this function. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Automatic display and hiding of advertisements</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--Introduce jQuery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
/*
need:
1. When the page is loaded, 3 seconds later. Automatically display ads 2. The ads will automatically disappear after being displayed for 5 seconds.
analyze:
1. Use a timer to complete. setTimeout (execute a timer)
2. Analysis found that JQuery's display and hide animation effects are actually controlling display
3. Use the show/hide method to display the ad*/
//Entry function, after the page is loaded, define the timer and call these two methods$(function () {
//Define a timer, call the adShow method and execute setTimeout(adShow,3000) once 3 seconds later;
//Define a timer, call the adHide method, and execute setTimeout(adHide,8000) after 8 seconds;
});
//Display ads function adShow() {
//Get the ad div and call the display method $("#ad").show("slow");
}
//Hide ads function adHide() {
//Get the ad div and call the hide method $("#ad").hide("slow");
}
</script>
</head>
<body>
<!-- Overall DIV -->
<div>
<!-- Advertisement DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div>
<!-- Main text below -->
<div id="content">
Body part</div>
</div>
</body>
</html>Directory structure:
Running results:When I first entered, the ad did not appear.
Three seconds later, the ad appears
The ad will disappear after five seconds.
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
>>: Detailed explanation of linux nslookup command usage
Recommend
MySQL reports an error: Can't find file: './mysql/plugin.frm' solution
Find the problem Recently, I found a problem at w...
How to use vue3+TypeScript+vue-router
Table of contents Easy to use Create a project vu...
Vue+canvas realizes the effect of refreshing waterfall chart from top to bottom in real time (similar to QT)
Without further ado, here is a demo picture. The ...
MySQL 8.0.11 compressed version installation tutorial
This article shares the installation tutorial of ...
Introduction to HTML basic controls_PowerNode Java Academy
The <input> tag The <input> tag is us...
Implementation of CSS3 button border animation
First look at the effect: html <a href="#...
How to optimize MySQL index function based on Explain keyword
EXPLAIN shows how MySQL uses indexes to process s...
Use of MySQL DDL statements
Preface The language classification of SQL mainly...
Example of using MRG_MyISAM (MERGE) to implement query after partitioning in MySQL
Optimizing large amounts of database data is a hu...
Several ways to switch between Vue Tab and cache pages
Table of contents 1. How to switch 2. Dynamically...
MySQL Community Server 8.0.12 installation and configuration method graphic tutorial
MySQL 8 brings a brand new experience, such as su...
MySQL query optimization: causes and solutions for slow queries
Friends who are doing development, especially tho...
How to use a field in one table to update a field in another table in MySQL
1. Modify 1 column update student s, city c set s...
How to configure two-way certificate verification on nginx proxy server
Generate a certificate chain Use the script to ge...
MySQL 5.6.27 Installation Tutorial under Linux
This article shares the installation tutorial of ...