使用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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
最常用的jQuery表单验证(简单)
May 23 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 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
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
js停止输出代码
2008/07/20 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
2014/05/27 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
Vue2.x中的Render函数详解
2017/05/30 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
python中defaultdict的用法详解
2017/06/07 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
python3实现猜数字游戏
2020/12/07 Python
pandas 选取行和列数据的方法详解
2019/08/08 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Django实现网页分页功能
2019/10/31 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
销售岗位职责范本
2014/06/12 职场文书
单位介绍信格式
2015/01/31 职场文书
布达拉宫导游词
2015/02/02 职场文书
同意报考证明
2015/06/17 职场文书
中学校园广播稿
2015/08/18 职场文书