用jQuery动态添加小广告
2024-10-19 02:19:15
网站的时候,有些网站总是在右下角,左上角或者其他地方投放广告。
我用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 () {
//动态创建层
var divObj = $('<div style="width:200px;height:200px;background-color:orange;position:absolute;right:0;bottom:0"><div>').click(function () {
//层的单击效果 此处可以放单击广告后的href
}).appendTo('body');
//创建右上角关闭按钮
$('<span style="float:right;border:3px solid gray;cursor:pointer">关闭</span>').click(function () {
//关闭层
$(this).parent().remove();
}).appendTo(divObj);
//使用计时器实现此广告5秒后自动关闭
var spObj = $('<span>此广告5秒后关闭</span>').appendTo(divObj);
var sec = ;
var setID = setInterval(function () {
sec--;
if (sec<= ) {
sec = ;
//清除计时器
clearInterval(setID);
//关闭层
$(divObj).remove();
} else {
$(spObj).text('此广告'+sec+'秒后关闭');
}
}, );
});
</script>
</head>
<body>
</body>
</html>
效果图如下
关于这个效果,我有以下思索:
1.可以添加一个计时器,倒计时‘还有5S关闭’,还有‘4S关闭’,告诉用户这个广告只是临时投放,5S后自动关闭,这个可以增强用户的体验度,我们都知道浏览一些网站的时候,广告老是占着地方在你们眼前晃悠,用户体验肯定不是很好,这可以很好的在广告客户和用户体验两者之间进行一个平衡;
2.背景颜色之所以选择orange,是因为orange是暖色,个人体验,如果广告背景是暖色的话,更愿意让他停留一些时间,相对比背景色是冷色的广告;
3.当然这只是一个小代码,大神们把内容完成以后,可以进行封装,使用起来肯定会更加方便。
最新文章
- 【腾讯Bugly干货分享】移动App入侵与逆向破解技术-iOS篇
- .NET和JAVA同等加密方法,MD5和DES对称加密记录
- ubuntu下的jdk安装
- oracle调整表中列顺序
- 西门子SIMATIC IT平台
- safeseh+dep保护绕过
- What are some good resources for learning about Artificial Neural Networks
- linux创建用户,指定组
- vmware-vdiskmanager
- Material Master
- Hive字段中文注释乱码解决办法
- 接触新的项目,构建时候报错:Failure to find io.netty:netty-tcnative:jar:${os.detected.classifier}:2.0.7.Final in
- MSDN i TELL YOU 又更新了,win10 1809版本的 3月29日的
- CSS 媒体查询@media
- 实验楼 MySQL 基础课程 挑战:搭建一个简易的成绩管理系统的数据库
- Scala进阶之路-反射(reflect)技术详解
- 抓取awr、语句级awr、ashrpt
- 初始Golang
- No.1011_第八次团队会议
- struct、union、enum and sizeof