jQuery를 사용하여 작은 광고를 동적으로 추가하는 방법에 대한 자세한 설명

小云云
풀어 주다: 2018-01-01 10:56:15
원래의
2296명이 탐색했습니다.

웹사이트를 탐색할 때 일부 웹사이트에서는 항상 오른쪽 하단, 왼쪽 상단 또는 기타 위치에 광고를 게재합니다. 이 기사에서는 주로 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 '5초 종료' 및 '4초 종료'까지 카운트다운하는 타이머를 추가하여 사용자에게 이 광고가 일시적으로만 시작되고 5초 후에 자동으로 종료된다는 점을 알릴 수 있습니다. 우리는 일부 웹사이트를 탐색할 때 때때로 광고가 항상 눈앞의 공간을 차지하고 사용자 경험이 좋지 않다는 것을 알고 있습니다. 이는 광고주와 사용자 경험 사이의 균형이 좋지 않을 수 있습니다.

2. 배경색이 주황색인 이유는 주황색이 따뜻한 색이기 때문입니다. 개인적인 경험으로 볼 때 배경색이 차가운 광고에 비해 광고의 배경색이 따뜻하면 한동안 그대로 두려는 의향이 더 큽니다.

3. 물론 이것은 작은 코드일 뿐이므로 마스터는 이후에 콘텐츠를 완성하고 캡슐화할 수 있으며 사용하기가 더 편리할 것입니다.

관련 권장 사항:

jQuery 광고 배너 스크롤 효과 구현 예시 공유

jQuery를 사용하여 페이지에 타이밍 팝업 광고 효과 기능 구현

루핑을 구현하는 방법에 대한 Javascript 튜토리얼 광고 스트립 효과

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!