快捷導(dǎo)航

使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告

更新時(shí)間：2017年07月11日 08:37:44 投稿：jingxian

下面小編就為大家?guī)硪黄褂胘Query實(shí)現(xiàn)動(dòng)態(tài)添加小廣告。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

覽網(wǎng)站的時(shí)候，有些網(wǎng)站總是在右下角，左上角或者其他地方投放廣告。

我用jQuery試著自己做了一個(gè)，代碼如下，如有不對(duì)的地方請(qǐng)各位不吝賜教

<!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 () {
        //創(chuàng)建層
        var divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));
        //創(chuàng)建右上角關(guān)閉按鈕
        $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {
          $(this).parent().remove();
        }).appendTo($(divObj));
        //添加廣告內(nèi)容

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

效果圖如下所示：

關(guān)于這個(gè)效果，我有以下思索：

1.可以添加一個(gè)計(jì)時(shí)器，倒計(jì)時(shí)‘還有5S關(guān)閉'，還有‘4S關(guān)閉'，告訴用戶這個(gè)廣告只是臨時(shí)投放，5S后自動(dòng)關(guān)閉，這個(gè)可以增強(qiáng)用戶的體驗(yàn)度，我們都知道瀏覽一些網(wǎng)站的時(shí)候，廣告老是占著地方在你們眼前晃悠，用戶體驗(yàn)肯定不是很好，這可以很好的在廣告客戶和用戶體驗(yàn)兩者之間進(jìn)行一個(gè)平衡；

2.背景顏色之所以選擇orange，是因?yàn)閛range是暖色，個(gè)人體驗(yàn)，如果廣告背景是暖色的話，更愿意讓他停留一些時(shí)間，相對(duì)比背景色是冷色的廣告；

3.當(dāng)然這只是一個(gè)小代碼，大神們把內(nèi)容完成以后，可以進(jìn)行封裝，使用起來肯定會(huì)更加方便。

以上這篇使用jQuery實(shí)現(xiàn)動(dòng)態(tài)添加小廣告就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: