jQuery를 사용하여 작은 광고를 동적으로 추가하는 방법에 대한 자세한 설명
- 小云云원래의
- 2018-01-01 10:56:152303검색
웹사이트를 탐색할 때 일부 웹사이트에서는 항상 오른쪽 하단, 왼쪽 상단 또는 기타 위치에 광고를 게재합니다. 이 기사에서는 주로 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를 사용하여 페이지에 타이밍 팝업 광고 효과 기능 구현
루핑을 구현하는 방법에 대한 Javascript 튜토리얼 광고 스트립 효과
위 내용은 jQuery를 사용하여 작은 광고를 동적으로 추가하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!