Detailed explanation of using jQuery to dynamically add small ads-JS Tutorial-php.cn

Detailed explanation of using jQuery to dynamically add small ads

小云云

Release： 2018-01-01 10:56:15

Original

2295 people have browsed it

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>

Copy after login

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!