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
Detailed explanation of the use of Gulp.js, a powerful tool for front-end task construction
Table of contents Overview Install Gulp.js Create...
Analysis of Linux kernel scheduler source code initialization
Table of contents 1. Introduction 2. Basic Concep...
Detailed explanation of Linux netstat command
Table of contents Linux netstat command 1. Detail...
CSS naming conventions (rules) worth collecting Commonly used CSS naming rules
CSS naming conventions (rules) Commonly used CSS ...
mysql group by grouping multiple fields
In daily development tasks, we often use MYSQL...
Install CentOS7 in VMware (set static IP address) and install mySql database through docker container (super detailed tutorial)
A sophomore asked me how to install and configure...
A brief analysis of the knowledge points of exporting and importing MySQL data
Often, we may need to export local database data ...
Detailed explanation of Vue components
<body> <div id="root"> <...
Example of using store in vue3 to record scroll position
Table of contents Overall Effect Listen for conta...
Detailed explanation of incompatible changes in rendering functions in Vue3
Table of contents Rendering API changes Render fu...
Explanation of installation and configuration of building go environment under linux
It is very simple to build a go environment under...
Vue implements a simple timer component
When doing a project, it is inevitable to encount...
Detailed explanation of CSS3 Flex elastic layout example code
1. Basic Concepts //Any container can be specifie...
Native JS to achieve cool paging effect
This article uses an example to share with you a ...
Let's learn about MySQL database
Table of contents 1. What is a database? 2. Class...