首頁 > web前端 > js教程 > 使用jQuery實作動態新增小廣告詳解

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

小云云
發布: 2018-01-01 10:56:15
原創
2345 人瀏覽過

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

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

<!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>
登入後複製

效果圖如下所示:

關於這個效果,我有以下思索:

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

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

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

相關推薦:

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

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板