使用jQuery实现动态添加小广告


Posted in jQuery onJuly 11, 2017

览网站的时候,有些网站总是在右下角,左上角或者其他地方投放广告。

我用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>

效果图如下所示:

使用jQuery实现动态添加小广告

关于这个效果,我有以下思索:

1.可以添加一个计时器,倒计时‘还有5S关闭',还有‘4S关闭',告诉用户这个广告只是临时投放,5S后自动关闭,这个可以增强用户的体验度,我们都知道浏览一些网站的时候,广告老是占着地方在你们眼前晃悠,用户体验肯定不是很好,这可以很好的在广告客户和用户体验两者之间进行一个平衡;

2.背景颜色之所以选择orange,是因为orange是暖色,个人体验,如果广告背景是暖色的话,更愿意让他停留一些时间,相对比背景色是冷色的广告;

3.当然这只是一个小代码,大神们把内容完成以后,可以进行封装,使用起来肯定会更加方便。

以上这篇使用jQuery实现动态添加小广告就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现文本显示一段时间后隐藏的方法分析
Jun 20 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 #jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 #jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 #jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 #jQuery
You might like
thinkphp模板输出技巧汇总
2014/11/24 PHP
php筛选不存在的图片资源
2015/04/28 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
Vue表单控件绑定图文详解
2019/02/11 Javascript
vue图片加载失败时用默认图片替换的方法
2019/08/29 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
jquery自定义组件实例详解
2020/12/31 jQuery
python进程管理工具supervisor使用实例
2014/09/17 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python监控进程脚本
2018/04/12 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
实例讲解python中的协程
2018/10/08 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
德国户外商店:eXXpozed
2020/07/25 全球购物
销售总监工作职责
2013/11/21 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
导购员的岗位职责
2014/02/08 职场文书
电钳工人个人求职信
2014/05/10 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
优秀员工自荐书
2015/03/06 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
职工食堂管理制度
2015/08/06 职场文书