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

HTML cellpadding and cellspacing attributes explained in pictures

Javascript to achieve the effect of closing advertisements

HTML cellpadding and cellspacing attributes explained in pictures

A brief discussion on the VUE uni-app development environment

mysql trigger creation and usage examples

Basic ideas and codes for implementing video players in browsers

Detailed explanation of MySQL replication principles and practical applications

Vue+swiper realizes timeline effect

Summary of knowledge points about events module in Node.js

A detailed introduction to seata docker high availability deployment

How to solve the mysql insert garbled problem

HTML4.0 element default style arrangement

Recommend

A detailed introduction to Tomcat directory structure

CSS performance optimization - detailed explanation of will-change usage

SQL left join and right join principle and example analysis

Detailed explanation of the front-end method of passing parameters between HTML pages

Detailed explanation of the idea of querying the difference between hourly data and last hourly data in MySQL

Detailed tutorial on deploying Hadoop cluster using Docker

JavaScript to implement click to switch verification code and verification

Solution for front-end browser font size less than 12px

MySQL concurrency control principle knowledge points

A brief analysis of how to change the root password in Linux suse11 if you forget it

Practice of using Vite2+Vue3 to render Markdown documents

Calling the search engine in the page takes Baidu as an example

Detailed explanation of the complete usage example of developing hyperf under Docker

Detailed explanation of Linux host name modification command

How to smoothly upgrade and rollback Nginx version in 1 minute