jQuery 사용법: 작은 광고의 동적 추가
- 巴扎黑원래의
- 2017-07-23 15:07:081289검색
웹사이트를 탐색할 때 일부 웹사이트에서는 항상 오른쪽 하단, 왼쪽 상단 또는 기타 위치에 광고를 게재합니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.