jQuery 사용법: 작은 광고의 동적 추가-JS 튜토리얼-php.cn

jQuery 사용법: 작은 광고의 동적 추가

巴扎黑

풀어 주다： 2017-07-23 15:07:08

원래의

1215명이 탐색했습니다.

웹사이트를 탐색할 때 일부 웹사이트에서는 항상 오른쪽 하단, 왼쪽 상단 또는 기타 위치에 광고를 게재합니다.

jQuery를 사용하여 직접 만들어 보았습니다. 잘못된 점이 있으면 알려주세요.

 1 <!DOCTYPE html> 2 <html xmlns=""> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5     <title></title> 6     <script src="jquery-1.8.3.js"></script> 7     <script type="text/javascript"> 8         $(function () { 9             $('#btn').click(function () {10                 //创建层11                 var divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));12                 //创建右上角关闭按钮13                 $('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {14                     $(this).parent().remove();15                 }).appendTo($(divObj));16                 //添加广告内容17 18             });19         });20     </script>21 </head>22 <body>23     <input type="button" name="name" value="显示效果" id="btn"/>24 </body>25 </html>

로그인 후 복사

효과 그림은 다음과 같습니다

나는 다음과 같은 생각을 가지고 있습니다:

1. 타이머를 추가하고 '5초 종료', '4초 종료'를 카운트다운하여 이 광고가 일시적으로만 배치되고 5초 후에 자동으로 종료된다는 것을 사용자에게 알릴 수 있습니다. 사용자 경험 향상 일부 웹사이트 탐색 광고가 항상 눈앞의 공간을 차지할 때 사용자 경험은 확실히 좋지 않을 수 있습니다.

2. 배경색이 주황색인 이유는 주황색이 따뜻한 색이기 때문인데 개인적인 경험상 광고의 배경색이 따뜻하면 차가운 배경색을 사용한 광고에 비해 광고의 배경색이 따뜻하면 한동안 그대로 두려는 의향이 더 크다고 합니다

3. 물론 이것은 작은 코드일 뿐이므로 마스터들이 콘텐츠를 완성할 것입니다. 앞으로는 캡슐화할 수 있어 확실히 사용하기 더 편리해질 것입니다.

위 내용은 jQuery 사용법: 작은 광고의 동적 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!