search

Home >Web Front-end >JS Tutorial >Detailed explanation of using jQuery to dynamically add small ads

Detailed explanation of using jQuery to dynamically add small ads

小云云
小云云Original
2018-01-01 10:56:152346browse

When browsing websites, some websites always place advertisements in the lower right corner, upper left corner or other places. This article mainly brings you an article using jQuery to dynamically add small advertisements. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

I tried to make one myself using jQuery. The code is as follows. If there is something wrong, please feel free to enlighten me. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <title></title>
  <script src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function () {
      $('#btn').click(function () {
        //创建层
        var pObj = $('<p style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></p>').appendTo($('body'));
        //创建右上角关闭按钮
        $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {
          $(this).parent().remove();
        }).appendTo($(pObj));
        //添加广告内容

      });
    });
  </script>
</head>
<body>
  <input type="button" name="name" value="显示效果" id="btn"/>
</body>
</html>

The rendering is as follows:

Regarding this effect, I have the following thoughts:

1. You can add a timer, counting down '5S to close' and '4S to close' to tell the user that this advertisement is only temporary. It 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 in front of your eyes. The user experience is definitely not very good. This can be very good for advertisers. Make a balance between the background color and the user experience;

2. The reason why the background color is orange is because orange is a warm color. From personal experience, if the advertising background is a warm color, I am more willing to let it stay for some time. Compared with advertisements with a cool background color;

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.

Related recommendations:

jQuery realizes the advertising banner scrolling effect example sharing

Using jQuery to realize the page timing pop-up advertising effect Functional implementation

Javascript tutorial on how to achieve the effect of circular advertising banners

The above is the detailed content of Detailed explanation of using jQuery to dynamically add small ads. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery 封装 循环
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：Detailed explanation of the functions of adding, replacing, deleting and copying nodes using jQueryNext article：Detailed explanation of the functions of adding, replacing, deleting and copying nodes using jQuery

Related articles

See more