使用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实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
jQuery日期范围选择器附源码下载
May 23 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery实现下载图片功能
Jul 18 jQuery
jquery实现直播弹幕效果
Nov 28 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery弹框插件使用方法详解
May 26 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使用ActiveMQ实例
2018/02/05 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
2013/06/24 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
python 装饰器功能以及函数参数使用介绍
2012/01/27 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
Python编程在flask中模拟进行Restful的CRUD操作
2018/12/28 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
Python日志syslog使用原理详解
2020/02/18 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
德国网上药房:Apotal
2017/04/04 全球购物
触摸春天教学反思
2014/02/03 职场文书
食品安全工作实施方案
2014/03/26 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
个人自查自纠材料
2014/10/14 职场文书
部队2015年终工作总结
2015/04/02 职场文书
初中语文教师研修日志
2015/11/13 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers