Home > Article > Web Front-end > jQuery usage: dynamic addition of small ads

jQuery usage: dynamic addition of small ads

巴扎黑Original: 2017-07-23 15:07:081217browse

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation of internal custom instructions and global custom instructionsNext article：Implementation of internal custom instructions and global custom instructions

See more

jQuery usage: dynamic addition of small ads

Related articles