您现在的位置:首页 --> JavaScript --> 弹窗广告开发
弹窗广告开发
浏览:1934次 出处信息
昨天弄了一个非常简陋的右下角弹窗广告demo:http://www.css88.com/demo/rightDown-ad/
因为工作和其他原因该代码没有最终完善,等以后项目上了可能会重新开发,本代码也并非本人原创,朋友给的一段代码,我在他的基础上改的,主要改进点:
- 在支持position:fixed的浏览器上使用position:fixed,这样当拖动共同条的时候弹窗位置是固定的。
- 优化了IE6下onscroll 事件绑定的函数
还需改进的地方(过段事件等项目应用的时候会修改):
- 30秒后自动关闭
- 方便的插入弹出内容
主要代码:
以下是代码片段: var RBMessage={ boxW:200, boxH:101, init:function(){ var that = this; this.createBox(); document.getElementById("msg_close").onclick = function() { that.BoxWin.style.display="none"; } }, bind: function() { //绑定窗口滚动条与大小变化事件 var that = this, st, rt; window.onscroll = function() { if( !!window.ActiveXObject &amp;amp;&amp;amp; !window.XMLHttpRequest ){ clearTimeout(st); clearTimeout(that.timer2); that.setOpacity(0); st = setTimeout(function() { that.BoxWin.style.top = that.getY().top; that.show(); },500); } }; window.onresize = function(){ if (!!window.ActiveXObject &amp;amp;&amp;amp; !window.XMLHttpRequest) { clearTimeout(rt); rt = setTimeout(function(){ that.BoxWin.style.top = that.getY().top }, 100); } } }, show: function() { //渐显 clearInterval(this.timer2); var that = this, fx = this.fx(0, 100, 0.1), t = 0; this.timer2 = setInterval(function() { t = fx(); that.setOpacity(t[0]); if (t[1] == 0) { clearInterval(that.timer2) } }, 10); }, fx: function(a, b, c) { //缓冲计算 var cMath = Math[(a - b) > 0 ? "floor": "ceil"], c = c || 0.1; return function() { return [a += cMath((b - a) * c), a - b] } }, setOpacity: function(x) { //设置透明度 var v = x >= 100 ? ’’: ’Alpha(opacity=’ + x + ’)’; this.BoxWin.style.visibility = x < = 0 ? ’hidden’: ’visible’; //IE有绝对或相对定位内容不随父透明度变化的bug this.BoxWin.style.filter = v; this.BoxWin.style.opacity = x / 100; }, getY: function() { //计算移动坐标 var d = document, b = document.body, e = document.documentElement; var s = Math.max(b.scrollTop, e.scrollTop); var h = /BackCompat/i.test(document.compatMode) ? b.clientHeight: e.clientHeight; var h2 = this.BoxWin.offsetHeight; return { foot: s + h + h2 + 2 + ’px’, top: s + h - h2 - 2 + ’px’ } }, moveTo: function(y) { //移动动画 clearInterval(this.timer); var that = this; var moveTopNum=-that.boxH; this.timer = setInterval(function() { moveTopNum+=5; that.BoxWin.style.bottom = moveTopNum +’px’; if (moveTopNum >= 0) { clearInterval(that.timer); that.bind(); } },50); return this; }, createBox:function(){ this.BoxWin=document.createElement(’div’); this.BoxWin.style.width = this.boxW+"px"; this.BoxWin.style.height = this.boxH+"px"; this.BoxWin.style.bottom = - this.boxH+"px"; this.BoxWin.id = "msg_win"; this.BoxWin.innerHTML = ’<div class="icos"><a href="javascript:void 0" title="关闭" id="msg_close">X</a></div><div id="msg_title">温馨提示(标题)</div><div id="msg_content"></div>’; document.body.appendChild(this.BoxWin); var that = this; setTimeout(function() { //初始化最先位置 that.BoxWin.style.display = ’block’; that.moveTo(); },1000); return this; } }; RBMessage.init(); |
建议继续学习:
- 彻底屏蔽优酷广告 (阅读:11292)
- 广告与消费心理分析 (阅读:3343)
- 广告心理学中的创意简析 (阅读:3060)
- 简单好用的土办法抗击洋鬼子对wordpress系统的广告灌入 (阅读:2838)
- QQ农场小帮手最简单去广告的方法 (阅读:2725)
- 说说弹窗和新窗口打开拦截 (阅读:2548)
- 互联网广告的发展史 (阅读:2462)
- msn2011完美去广告方案 (阅读:2411)
- 姐要的视频广告 (阅读:2242)
- 网站广告投放策略研究 (一) 轮播以及效用最大化 (阅读:2179)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:使用Apparat框架优化你的Flash
后一篇:将你的 KISSY 程序移植到服务器端 >>
文章信息
- 作者:愚人码头 来源: WEB前端开发
- 标签: onscroll 广告 弹窗
- 发布时间:2010-11-13 09:07:19
建议继续学习
近3天十大热文
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] android 开发入门
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成