jQuery usage: dynamic addition of small ads
When browsing a website, some websites always place advertisements in the lower right corner, upper left corner or other places.
I tried to make one myself using jQuery. The code is as follows. If there is something wrong, please let me know.
1 <!DOCTYPE html> 2 <html xmlns=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <script src="jquery-1.8.3.js"></script> 7 <script type="text/javascript"> 8 $(function () { 9 $('#btn').click(function () {10 //创建层11 var divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));12 //创建右上角关闭按钮13 $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {14 $(this).parent().remove();15 }).appendTo($(divObj));16 //添加广告内容17 18 });19 });20 </script>21 </head>22 <body>23 <input type="button" name="name" value="显示效果" id="btn"/>24 </body>25 </html>The rendering is as follows
Regarding this effect, I have the following thoughts:
1. You can add a timer to count down '5S to close' and '4S' Close' tells the user that this advertisement is only temporarily placed and will be automatically closed after 5 seconds. This can enhance the user experience. We all know that when browsing some websites, advertisements always take up space and hang in front of your eyes. The user experience is definitely not very good. , which can create a good balance between advertisers and user experience;
2. The reason why the background color is orange is because orange is a warm color. Personal experience, if the advertising background is a warm color , I am more willing to let him stay for some time, compared to ads with cold background colors;
3. Of course, this is just a small code. After the masters complete the content, they can encapsulate it, and it will definitely be more convenient to use. .
The above is the detailed content of jQuery usage: dynamic addition of small ads. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1392
52
Convert VirtualBox fixed disk to dynamic disk and vice versa
Mar 25, 2024 am 09:36 AM
When creating a virtual machine, you will be asked to select a disk type, you can select fixed disk or dynamic disk. What if you choose fixed disks and later realize you need dynamic disks, or vice versa? Good! You can convert one to the other. In this post, we will see how to convert VirtualBox fixed disk to dynamic disk and vice versa. A dynamic disk is a virtual hard disk that initially has a small size and grows in size as you store data in the virtual machine. Dynamic disks are very efficient at saving storage space because they only take up as much host storage space as needed. However, as disk capacity expands, your computer's performance may be slightly affected. Fixed disks and dynamic disks are commonly used in virtual machines
How to turn off the ads recommended by 360 Browser? How to turn off ads recommended by 360 Browser on PC?
Mar 14, 2024 am 09:16 AM
How to turn off the ads recommended by 360 Browser? I believe that many users are using 360 Browser, but this browser sometimes pops up advertisements, which makes many users very distressed. Let this site carefully introduce to users how to Turn off the ads recommended by 360 Browser on your computer. How to turn off the ads recommended by 360 Browser on your computer? Method 1: 1. Open 360 Safe Browser. 2. Find the "three horizontal bars" logo in the upper right corner and click [Settings]. 3. Find [Lab] in the taskbar on the left side of the pop-up interface, and check [Enable "360 Hotspot Information" function]. Method 2: 1. First double-click
How to turn off ads in the new version of Edge? How to block Edge personalized ads
Mar 14, 2024 am 11:37 AM
After updating the Edge browser, many users found that there were a lot of advertisements on the interface. For example, at the bottom of the new tab page, there were links to multiple websites and the word advertisements were marked, which looked very annoying. Is there any way to turn off personalized ads in Edge browser? The editor has searched many methods on the Internet, and I will share with you a little trick to turn off ads. How to turn off ads in the new version of Edge? 1. Open the Edge browser. 2. Click [•••] in the upper right corner. 3. Click [Settings]. 4. Click [Privacy, Search and Services]. 5. Turn off the switch on the right side of "Personalize your web experience" to turn off the personalization pushed by Microsoft.
How to completely turn off ads in Moments
Mar 03, 2024 pm 12:31 PM
Users will encounter a lot of advertisements when browsing Moments, so how can they completely turn off the advertisements? Users need to click Settings in My, then find Personal Information and Permissions, then click Personalized Ads Management, and just turn off ad personalization. This article will tell you how to completely turn off ads in Moments, so take a look! WeChat usage tutorial: How to completely turn off ads in Moments? Answer: It cannot be turned off completely. You can only turn off personalized recommendations. Specific methods: 1. First, click on me, and then find the settings inside. 2. Find the personal information and permissions options. 3. Click on the personalized advertising management function inside. 4. Click the switch on the right side of ad personalization and turn it off. How to turn off ads: 1. Find the ads in Moments. 2. Click right
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
How to turn off smart advertising recommendations on Douyin
Mar 22, 2024 pm 04:06 PM
When we usually use Douyin for entertainment, we often have some inexplicable and strange advertisements that disturb our leisure experience. Many users are not disturbed by them and want to turn off the recommendation push of these advertisements, but they don't. If you know how to operate it, then the editor of this website will bring you this tutorial guide and this detailed introduction, hoping to help everyone in need. First, we first find the option to understand and manage ad push in the app settings, then see all the ad-related switch options below, click the switch at the back to turn it off, and then a confirmation prompt to turn off the ad will pop up, we click to confirm. Close ads
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
