我們?cè)跒g覽網(wǎng)站的時(shí)候是不是經(jīng)常經(jīng)驗(yàn)在右下角或者是其他地方看到小廣告呢，那么就會(huì)有小伙伴們會(huì)好奇動(dòng)態(tài)小廣告是如何實(shí)現(xiàn)的呢？其實(shí)實(shí)現(xiàn)方法很簡單，下面我們就去看看jQuery如何動(dòng)態(tài)添加小廣告的內(nèi)容。
我用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如何動(dòng)態(tài)添加小廣告的內(nèi)容，小編覺得非常不錯(cuò)，今天就在這里分享給大家，希望對(duì)大家有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
