网站主当接到一个客户的广告,希望能像百度那样只引用一个JS就能实现右下角弹窗广告代码,现HTML580分享用纯JS实现右下角广告代码。

var html580ads={

init:function(title,content){

var text='

'+title+' X

'+

'

'+

'

'+

' '+content+

'

'+

'

';

var thiz=this;

var rootElement = document.body;

thiz.oDiv = document.createElement("div");

thiz.oDiv.id="miaov_float_layer";

thiz.oDiv.style.cssText="border: 1px solid #aaaaaa; display:none;width:250px;";

rootElement.appendChild(thiz.oDiv);

thiz.oDiv.innerHTML=text;

var oBtnMin = document.getElementById('btn_min');

var oBtnClose = document.getElementById('btn_close');

thiz.oDivContent = thiz.oDiv.getElementsByTagName('div')[0];

var iMaxHeight = 0;

var isIE6 = window.navigator.userAgent.match(/MSIE 6/ig)

&& !window.navigator.userAgent.match(/MSIE 7|8/ig);

thiz.oDiv.style.display = 'block';

iMaxHeight = thiz.oDivContent.offsetHeight;

if (isIE6) {

thiz.oDiv.style.position = 'absolute';

thiz.repositionAbsolute();

window.attachEvent('onscroll', function(){

thiz.repositionAbsolute();

});

window.attachEvent('onresize', function(){

thiz.repositionAbsolute();

});

} else {

thiz.oDiv.style.position = 'fixed';

thiz.repositionFixed();

}

oBtnMin.timer = null;

oBtnMin.isMax = true;

oBtnMin.onclick = function() {

thiz.startMove(thiz.oDivContent, (this.isMax = !this.isMax) ? iMaxHeight : 0,

function() {

oBtnMin.className = oBtnMin.className == 'min' ? 'max'

: 'min';

});

};

},

startMove:function(obj, iTarget, fnCallBackEnd) {

if (obj.timer) {

clearInterval(obj.timer);

}

var thiz = this;

obj.timer = setInterval(function() {

thiz.doMove(obj, iTarget, fnCallBackEnd);

}, 30);

},

doMove:function(obj, iTarget, fnCallBackEnd) {

var iSpeed = (iTarget - obj.offsetHeight) / 8;

if (obj.offsetHeight == iTarget) {

clearInterval(obj.timer);

obj.timer = null;

if (fnCallBackEnd) {

fnCallBackEnd();

}

}

else {

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

obj.style.height = obj.offsetHeight + iSpeed + 'px';

(window.navigator.userAgent.match(/MSIE 6/ig) && window.navigator.userAgent

.match(/MSIE 6/ig).length == 2) ? this.repositionAbsolute()

: this.repositionFixed();

}

},

repositionFixed:function () {

this.oDiv.style.right = 0;

this.oDiv.style.bottom = 0;

},

repositionAbsolute:function () {

var left = document.body.scrollLeft || document.documentElement.scrollLeft;

var top = document.body.scrollTop || document.documentElement.scrollTop;

var width = document.documentElement.clientWidth;

var height = document.documentElement.clientHeight;

this.oDiv.style.left = left + width - this.oDiv.offsetWidth + 'px';

this.oDiv.style.top = top + height - this.oDiv.offsetHeight + 'px';

}

};

window.onload = function() {

html580ads.init('HTML580我帮你广告标题','HTML580用纯JS实现右下角广告代码内容');

}

html右下角图片广告,HTML580用纯JS实现右下角广告代码相关推荐

  1. php 右下脚弹窗,纯js的右下角弹窗实例代码

    下面小编就为大家带来一篇纯js的右下角弹窗实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上 ...

  2. 图片轮播,纯js+css

    图片轮播,纯js+css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  3. 前端图片压缩上传(纯js的质量压缩,非长宽压缩)

    前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...

  4. 【jQuery】纯js的右下角弹窗

    这个弹窗是如下图的效果: 打开网页的时候,这个弹窗会淡入,之后点击右上角的关闭按钮,其实就是一个& times;会淡出. 采用淡入淡出是因为直接Jquery一个fadeIn与fadeOut省事 ...

  5. html右移动动画效果,图片的左右移动,js动画效果实现代码

    图片的左右移动,js动画效果实现代码 图片的左右移动,动画效果的实现 =(xk+xp)/2) { if (smer == 1) step--; else step++; } else { if (sm ...

  6. html图片百叶窗轮播,纯js百叶窗效果轮播图插件

    这是一款纯js百叶窗效果轮播图插件.该js轮播图在图片切换时的效果类似于多张图片展开合成一张完整的大图.该轮播图由纯js编写,兼容ie8浏览器. 使用方法 在页面中引入imgSwitch.min.js ...

  7. html一个页面分页代码怎么写,纯JS前端实现分页代码

    先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页 ...

  8. php++网页最右下角,js实现右下角可关闭最小化div(可用于展示推荐内容)

    本实例使用Javascript实现右下角可关闭最小化div,可以用于展示推荐内容,效果预览网址:http://keleyi.com/keleyi/phtml/xuanfudiv/3.htm 效果图片: ...

  9. 纯js分页代码(简洁实用)

    纯js分页代码(简洁实用) 纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage] ...

  10. php 图片预览原理,JavaScript_纯JS实现的批量图片预览加载功能,1.实现原理直接见代码,需要一 - phpStudy...

    纯JS实现的批量图片预览加载功能 1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果 复制代码 代码 ...

最新文章

  1. 计算机专业黑板报迎新,大学开学迎新黑板报
  2. k8s mysql operator_将 MySQL 通过 presslabs/mysql-operator 部署到 k8s 内部
  3. VS2008+QT4.8.7编译QTAV问题和解决方法
  4. linux c数字转字符串函数,Linux常用C函数—字符串转换篇
  5. MySQL字段类型与Java数据类型的对应关系
  6. boost::prev_permutation相关的测试程序
  7. 基于HLS流媒体协议的视频加密方案
  8. 利用Python自动发送电子邮件
  9. 华清实训的收获(人工智能的小广告和福利)
  10. mysql列连接_连接来自MySQL中不同表的列
  11. python的文件读取方式_python中文件读取方式
  12. 罗永浩将举办「老人与海」发布会;微软疑似遭遇大范围全球宕机;Python 3.9 首个测试版发布 | 极客头条...
  13. 微软Windows家族一览 从1.0到Longhorn
  14. WinForm客户端限速下载(C#限速下载)
  15. 微信小程序的学习资料销售平台
  16. Mysql-explain-Impossible WHERE noticed after reading const tables
  17. 【Python基础】Python语法入门
  18. 如何在ftp服务器编辑文件,ftp服务器怎么编辑文件
  19. 生成HTML注册页面
  20. 【松勤软件测试】昨天,松勤网被攻击,发现了一群bug,这个锅该谁来背-测试or开发 ?

热门文章

  1. 基于 GARCH-CoVaR 方法的中国 A 股行业 关联网络风险溢出动态研究
  2. CMDN Club每周精选(第2期)
  3. EasyRecovery免费版一键数据恢复还原软件
  4. 关于CUDA,cuDNN,TF,CUDA驱动版本兼容问题
  5. houdini 破解失败
  6. SpringBoot的配置文件properties和yml格式
  7. AV1视频编解码器核心编码工具概述
  8. 华三服务器管理口地址_H3C服务器配置HDM远程管理系统
  9. java apktool if_apktool反编译详细使用教程
  10. VLAN、OSPF、GRE或IPSEC配置作业与抓包内容(新手入门)