jQuery如何动态添加小广告
2020-02-20 16:01:13来源：爱站网 阅读 ()
我们在浏览网站的时候是不是经常经验在右下角或者是其他地方看到小广告呢，那么就会有小伙伴们会好奇动态小广告是如何实现的呢？其实实现方法很简单，下面我们就去看看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 divObj = $('<div style="width:200px;height:200px;position:absolute;right:0;bottom:0;background-color:orange"></div>').appendTo($('body'));
//创建右上角关闭按钮
$('<sapn style="float:right;cursor:pointer; border:3px solid gray">X</span>').click(function () {
$(this).parent().remove();
}).appendTo($(divObj));
//添加广告内容
});
});
</script>
</head>
<body>
<input type="button" name="name" value="显示效果" id="btn"/>
</body>
</html>效果图如下所示：
关于这个效果，我有以下思索：
1.可以添加一个计时器，倒计时‘还有5S关闭'，还有‘4S关闭'，告诉用户这个广告只是临时投放，5S后自动关闭，这个可以增强用户的体验度，我们都知道浏览一些网站的时候，广告老是占着地方在你们眼前晃悠，用户体验肯定不是很好，这可以很好的在广告客户和用户体验两者之间进行一个平衡；
2.背景颜色之所以选择orange，是因为orange是暖色，个人体验，如果广告背景是暖色的话，更愿意让他停留一些时间，相对比背景色是冷色的广告；
3.当然这只是一个小代码，大神们把内容完成以后，可以进行封装，使用起来肯定会更加方便。
以上这篇使用就是介绍jQuery如何动态添加小广告的内容，小编觉得非常不错，今天就在这里分享给大家，希望对大家有所帮助。
原文链接:https://js.aizhan.com/develop/JavaScript/11649.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- Jquery插件写法笔记整理 2020-03-29
- 基于JQuery的多标签实现代码 2020-03-29
- 关于jQuery UI 使用心得及技巧 2020-03-29
- Jquery图形报表插件 jqplot简介及参数详解 2020-03-25
- jQuery插件开发全解析 2020-03-25
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
