WordPress添加跟随屏幕对联广告代码

汇站在网上闲逛的时候，在一个论坛的两侧发现了一幅对联式图片展示，这是为了营造博客新年氛围，为年前的博客添加新年对联。代码还是可以和大家分享的。

教程开始：

首先根据自己的主题和意图定制自己的对联图片，得到图片地址。这里建议使用//，避免 HTTP 和 HTTPS 之间转换的麻烦。在将代码放在主题根 footer.php 的对联之后之前，代码如下：

<SCRIPT language="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*/}
//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("rightDiv").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
//alert(lastScrollY);
}
//下面这段删除后，对联将不跟随屏幕而移动。
window.setInterval("heartBeat()",1);
//-->
//关闭按钮
function close_left2(){
 left2.style.visibility='hidden';
}
function close_right2(){
 right2.style.visibility='hidden';
}
//显示样式
document.writeln("<style type=\"text\/css\">");
document.writeln("#leftDiv,#rightDiv{position:absolute;}");
document.writeln(".itemFloat{width:100px;height:auto;line-height:5px}");
document.writeln("<\/style>");
//以下为主要内容
document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">");
//------左侧各块开始
//---L2
document.writeln("<div id=\"left2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=//www.dujin.org/images/duilianz.jpg>");
document.writeln("<br><a href=\"javascript:close_left2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------左侧各块结束
document.writeln("<\/div>");
document.writeln("<div id=\"rightDiv\" style=\"top:112px;right:50px\">");
//------右侧各块结束
//---R2
document.writeln("<div id=\"right2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=//www.dujin.org/images/duiliany.jpg>");
document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");
</SCRIPT>

然后，用自己的对联图片替换图片地址。为了更好地适应访客的效果，金哥计划不在分辨率低于 1500 的终端设备(包括手机)上显示对联，所以增加了 css 样式。

@media (max-width:1500px){#leftDiv,#rightDiv{display:none !important}}

代码中的最大宽度值 1500 可以根据自己的需要设置。比如很多笔记本电脑的分辨率是 1440，会影响两边的内容显示。毕竟，每次关闭两张图片会很烦人，你可以把它们放在 footer.php，但它们在每个页面上都有。至于对联的特效，比如随屏移动，是否显示关闭按钮等。，都已经写在代码里了，你可以自己修改。

转载请注明：汇站网 » WordPress 添加跟随屏幕对联广告代码