使用jQuery實作動態新增小廣告詳解

瀏覽網站的時候，有些網站總是在右下角，左上角或是其他地方投放廣告。本文主要為大家帶來一篇使用jQuery實現動態新增小廣告。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

我用jQuery試著自己做了一個，程式碼如下，如有不對的地方請各位不吝賜教

nbsp;html>


<meta>
  <title></title>
  <script></script>
  <script>
    $(function () {
      $(&#39;#btn&#39;).click(function () {
        //创建层
        var pObj = $(&#39;<p style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange">&#39;).appendTo($(&#39;body&#39;));
        //创建右上角关闭按钮
        $(&#39;<sapn style="float:right;cursor:pointer; border:3px solid gray">X&#39;).click(function () {
          $(this).parent().remove();
        }).appendTo($(pObj));
        //添加广告内容

      });
    });
  </script>


  <input>

效果圖如下所示：

關於這個效果，我有以下思索：

1.可以添加一個計時器，倒數計時'還有5S關閉'，還有'4S關閉'，告訴用戶這個廣告只是臨時投放，5S後自動關閉，這個可以增強用戶的體驗度，我們都知道瀏覽一些網站的時候，廣告老是佔著地方在你們眼前晃悠，用戶體驗肯定不是很好，這可以很好的在廣告客戶和使用者體驗兩者之間進行一個平衡；

2.背景顏色之所以選擇orange，是因為orange是暖色，個人體驗，如果廣告背景是暖色的話，更願意讓他停留一些時間，相對比背景色是冷色的廣告；

3.當然這只是一個小代碼，大神們把內容完成以後，可以進行封裝，使用起來肯定會更加方便。

相關推薦：

jQuery實作廣告條滾動效果實例分享

使用jQuery實作頁面定時彈出廣告效果的功能實作

javascript實作循環廣告條效果方法教學

以上是使用jQuery實作動態新增小廣告詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！