使用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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jquery插件开发之选项卡制作详解
Aug 30 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
Oct 28 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jquery ajax 请求小技巧实例分析
Nov 11 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
如何给phpadmin一个保护
2006/10/09 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php基于dom实现的图书xml格式数据示例
2017/02/03 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
JS基于递归实现网页版计算器的方法分析
2017/12/20 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
python实现计算倒数的方法
2015/07/11 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
python GUI计算器的实现
2020/10/09 Python
彪马法国官网:PUMA法国
2019/12/15 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
高二学生评语大全
2014/04/25 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
商品陈列协议书
2014/09/29 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
Django中的JWT身份验证的实现
2021/05/07 Python
python如何利用traceback获取详细的异常信息
2021/06/05 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
为Centos安装指定版本的Docker
2022/04/01 Servers
Python中的 enumerate和zip详情
2022/05/30 Python
keepalived + nginx 实现高可用方案
2022/12/24 Servers