w3c声明下可运行兼容性比较好的js对联广告集合

更新时间：2011年07月13日 11:54:30 作者：

最近有美工朋友找我们要兼容性比较好的对联广告代码，我们给他一个他竟然不能运行，经过排查，这是因为现在的广告也用了一样代码，函数命名重复。

最后我们给出合适的代码:
核心代码:

lastScrollY=0; 
function heartBeat(){ 
var diffY; 
if (document.documentElement && document.documentElement.scrollTop) 
diffY = document.documentElement.scrollTop; 
else if (document.body) 
diffY = document.body.scrollTop 
else 
{/*Netscape stuff*/} 

//alert(diffY); 
percent=.1*(diffY-lastScrollY); 
if(percent>0)percent=Math.ceil(percent); 
else percent=Math.floor(percent); 
document.getElementById("leftDIV").style.top=parseInt(document.getElementById("leftDIV").style.top)+percent+"px"; 
document.getElementById("rightDIV").style.top=parseInt(document.getElementById("leftDIV").style.top)+percent+"px"; 

lastScrollY=lastScrollY+percent; 
//alert(lastScrollY); 
} 

sidebar1= "<div id=leftDIV style='left:0px; PosITION:absolute; TOP:0px;'><embed src=2010L.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div>" 
sidebar2= "<div id=rightDIV style='right:0px; PosITION:absolute; TOP:0px;'><embed src=2010R.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div> " 

document.write(sidebar1); 
document.write(sidebar2); 

//下面这段删除后，对联将不跟随屏幕而移动。 
window.setInterval("heartBeat()",1); 
//--> 

function closeAD() 
{ 
document.getElementById("leftDIV").style.display='none'; 
document.getElementById("rightDIV").style.display='none'; 
}

为了防止冲突，我们修改后的代码：
因为客户只需要右侧的代码，左侧的我们留空。

复制代码代码如下:

lastScrollY=0; 
function heartBeat2(){ 
var diffY; 
if (document.documentElement && document.documentElement.scrollTop) 
diffY = document.documentElement.scrollTop; 
else if (document.body) 
diffY = document.body.scrollTop 
else 
{/*Netscape stuff*/} 

//alert(diffY); 
percent=.1*(diffY-lastScrollY); 
if(percent>0)percent=Math.ceil(percent); 
else percent=Math.floor(percent); 
document.getElementById("leftDIV2").style.top=parseInt(document.getElementById("leftDIV2").style.top)+percent+"px"; 
document.getElementById("rightDIV2").style.top=parseInt(document.getElementById("leftDIV2").style.top)+percent+"px"; 

lastScrollY=lastScrollY+percent; 
//alert(lastScrollY); 
} 

sidebar1= "<div id=leftDIV2 style='left:0px; PosITION:absolute; TOP:0px;'></div>" 
sidebar2= "<div id=rightDIV2 style='right:0px; PosITION:absolute; TOP:0px;'><embed src=http://www.pcqc.com.cn/web/rdgqcq/dl/images/rdcq.swf width=150 height=400 quality=high pluginspage=http://www.macromedia.com/go/getflashplayer type=application/x-shockwave-flash scale=exactfit wmode=transparent id=EccoolAD></embed></div> " 

document.write(sidebar1); 
document.write(sidebar2); 

//下面这段删除后，对联将不跟随屏幕而移动。 
window.setInterval("heartBeat2()",1); 
//--> 
function closeAD() 
{ 
document.getElementById("leftDIV2").style.display='none'; 
document.getElementById("rightDIV2").style.display='none'; 
}

后来经过网上查找，又发现了一个不错的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> html,body{margin:0;font-family:Arial;font-size:12px;} #ad1,#ad2{position:absolute;float:left;width:100px;overflow:hidden; } #ad2{right:0;} #killAd1,#killAd2{position:absolute;bottom:10px;right:10px;cursor:pointer;border:1px solid #990000;padding:0 5px;background:red;color:#fff; } </style> <script> var fx=function(uid,kill){ var f=this,$=function(x){return document.getElementById(x)}; f.top=f.offset=20; f.ad=$(uid); $(kill).onclick=function(){f.die()}; f.timer=setInterval(function(){f.dll()},13); }; fx.prototype={ dll:function(){ var f=this,d=document,to=Math.max(d.body.scrollTop,d.documentElement.scrollTop); if(f.top!=to){ var d=(to-f.top)*0.1,mx=Math[d>0?'ceil':'floor']; f.top+=parseInt(mx(d)); f.ad.style.top=f.top+f.offset+'px'; }; }, die:function (){ this.ad.style.display='none'; clearInterval(this.timer); } }; window.onload = function (){ new fx('ad1','killAd1'); new fx('ad2','killAd2'); }; </script> </head> <body> <div id="ad1"> <span id="killAd1">x</span> <img src="/upload/201107/20110713115423968.jpg" border=0 alt="" title=""> </div> <div id="ad2"> <span id="killAd2">x</span> <img src="/upload/201107/20110713115423968.jpg" border=0 alt="" title=""> </div> <p style="height:20000px;"></p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

Js对联广告代码
经典的对联广告代码，JS代码实现，很简洁，也是通用的代码，随着滚动条的滚动自动适应，对联大小由CSS控制，这使得代码修改起来更加方便快捷，不懂JS也没有关系。不过本代码有一处遗憾就是没有关闭功能，真想用的可以自己加一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>标准对联广告Js代码</title> <style type="text/css">  </style> <script language="JavaScript" type="text/javascript"> lastScrollY=0; function heartBeat(){ var diffY; if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape stuff*/} percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("lovexin12").style.top=parseInt(document.getElementById ("lovexin12").style.top)+percent+"px"; document.getElementById("lovexin14").style.top=parseInt(document.getElementById ("lovexin12").style.top)+percent+"px"; lastScrollY=lastScrollY+percent; } suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>" suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>" document.write(suspendcode12); document.write(suspendcode14); window.setInterval("heartBeat()",1); </script> </head> <body> <div id="mm"></div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

对联广告

深入理解js数组的sort排序
下面小编就为大家带来一篇深入理解js数组的sort排序。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
js正则表达式注册页面表单验证
这篇文章主要为大家详细介绍了js正则表达式注册页面表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
用js屏蔽被http劫持的浮动广告实现方法
下面小编就为大家带来一篇用js屏蔽被http劫持的浮动广告实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
JS实现模拟风力的雪花飘落效果
这篇文章主要介绍了JS实现模拟风力的雪花飘落效果,可在右侧填入风力值点击按钮即可看到伴随风力的雪花飘落效果,同时右侧有实时雪花数量统计功能,需要的朋友可以参考下
2015-05-05
解决input输入框仅支持输入数字及两位小数点的限制
这篇文章主要为大家介绍了解决input输入框仅支持输入数字及两位小数点的限制技巧示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-11-11
JavaScript的设计模式经典之建造者模式
建造者模式是设计模式的一种，将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。接下来通过本文给大家介绍JavaScript的设计模式经典之建造者模式，感兴趣的朋友一起学习吧
2016-02-02
简单谈谈offsetleft、offsetTop和offsetParent
这篇文章主要给大家介绍了offsetleft、offsetTop和offsetParent的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
微信小程序动态显示项目倒计时效果
这篇文章主要为大家详细介绍了微信小程序动态显示项目倒计时，格式如4天7小时58分钟39秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
js实现鼠标移入图片放大效果
这篇文章主要为大家详细介绍了js实现鼠标移入图片放大效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS一维数组转化为三维数组方法
这篇文章主要给大家分享了JS一维数组转化为三维数组的方法，下面文章围绕JS数组转换的相关资料展开内容，对大家的学习有一定的参考价值，需要的小伙伴可以参考一下
2022-01-01