使用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绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 jQuery
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jquery.validate表单验证插件使用详解
Jun 21 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery实现容器间的元素拖拽功能
Dec 01 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
不间断循环滚动效果的实例代码(必看篇)
2016/10/08 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
2018/11/29 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
浅谈python import引入不同路径下的模块
2017/07/11 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python获取linux系统信息的三种方法
2020/10/14 Python
关于Python错误重试方法总结
2021/01/03 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
美国网上订购鲜花:FTD
2016/09/23 全球购物
英国PC组件和在线电脑商店:SCAN
2019/04/18 全球购物
表扬稿范文
2015/01/17 职场文书
城管个人总结
2015/02/28 职场文书
校长个人总结
2015/03/03 职场文书
个性与发展自我评价
2015/03/06 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
公司员工辞职信范文
2015/05/12 职场文书