jQuery를 사용하여 작은 광고를 동적으로 추가하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

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