Javascript to achieve the effect of closing advertisements

Here is a case study on how to close ads using Javascript for your reference. The details are as follows:

I am still learning the big front end. Please forgive me if there are any irregular or incorrect codes and ideas. Thank you for your advice.

We can often see annoying small advertisements on web pages, and there is usually a specific position and icon next to the advertisement to close the advertisement. The following JS code is used to simply implement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      padding: 0;
      margin: 0;
      border: 0;
    }
    .gg{
      width: 100%;
      height: 300px;
      background-image: url("../images/JD.png");
    }
    .img{
      width: 20px;
      height: 20px;
      float: right;
    }
  </style>
</head>
<body>
<div class="gg">
  <img class="img" src="../images/2.jpg" title="Close">
</div>
<script>
  var gg = document.querySelector('.gg')
  var mg = document.querySelector('img')
  mg.onclick = function () {
    gg.style.display = 'none'
  }
</script>
</body>
</html>

Code Explanation

The principle here is very simple. I put an annoying advertising picture at the bottom of the div, and then put a small icon representing close on it, and placed it in the upper right corner of the small advertisement. Then I get the event, and when it is onclick, the function is triggered. The content of the function is to hide this large div box directly and not display it, thus achieving the purpose of closing the advertisement.

Demonstration effect

Note the upper right corner

After clicking the set location

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:

JS realizes closing small advertisement special effects
JS implements the code for closing couplet advertising effect
JS lower right corner advertising window code (can be shrunk, expanded and closed)
js implements the floating ad bar code that can be closed at the top of the website
JS implements the left ad code that can be clicked to expand and close
JavaScript to achieve advertising closing and display effects example
js to achieve the following mouse movement and close the picture advertising example
Javascript implements web page floating ad code with close button
js pop-up ad code when IE is closed to prevent blocking

<<: How to change mysql password under Centos

>>: Problems and solutions for MYSQL5.7.17 connection failure under MAC

Vue.js style layout Flutter business development common skills

MySQL 8.0.20 Window10 free installation version configuration and Navicat management tutorial graphic detailed explanation

1. Download and decompress MySQL 8.0.20 Download ...

Javascript to achieve the effect of closing advertisements

Vue.js style layout Flutter business development common skills

HTML data submission post_PowerNode Java Academy

Detailed tutorial on installation and configuration of compressed version of MySQL database

Example of how to deploy MySQL 8.0 using Docker

MySQL Basic Tutorial: Detailed Explanation of DML Statements

W3C Tutorial (16): Other W3C Activities

Detailed tutorial for installing winx64 under mysql8.0.18 (with pictures and text)

Solution to the problem that the InnoDB engine is disabled when MySQL is started

A brief analysis of how to set the initial value of Linux root

Summary of Linux ps and pstree command knowledge points

Recommend

MySQL 8.0.14 installation and configuration method graphic tutorial

Detailed tutorial on deploying Apollo custom environment with docker-compose

Detailed explanation of Vue ElementUI manually uploading excel files to the server

9 ways to show and hide CSS elements

Basic principles for compiling a website homepage

A brief discussion on the whole process of Vue's first rendering

Batch replace part of the data of a field in Mysql (recommended)

Unicode signature BOM detailed description

A record of the pitfalls of the WeChat applet component life cycle

Docker installs Redis and introduces the visual client for operation

SQL Practice Exercise: Online Mall Database Product Category Data Operation

MySQL 8.0.20 Window10 free installation version configuration and Navicat management tutorial graphic detailed explanation

Several common methods of CSS equal height layout

Tips for adding favicon to a website: a small icon in front of the URL

js implements clock component based on canvas