添加春节/节日滚动春联/对联挂件动态效果-WordPress主题美化

功能介绍

春节到来的时候，让我们为网站增添一些喜庆的氛围，贴上春联吧。

对联会出现在屏幕两侧，如果滚动下啦，会跟随屏幕移动。

效果展示

配置教程

一、首先找到网站主题目录下footer.php文件，把下面代码放在倒数第3行（</body>标签之前）

说明：其中需要修改的地方就是对联图片的地址，大家自行上传喜欢的对联图片即可。

<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';
}
//显示样式-蓝番茄网络提供www.bluefanqie.com
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>");
//以下为主要内容-蓝番茄网络提供www.bluefanqie.com
document.writeln("<div id=\"leftDiv\" style=\"top:112px;left:50px\">");
//------左侧各块开始
//---L2
document.writeln("<div id=\"left2\" class=\"itemFloat\">");
document.writeln("<img border=0 src=https://www.bluefanqie.com/news/img/cl01-l.png>");
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=https://www.bluefanqie.com/news/img/cl01-r.png>");
document.writeln("<br><a href=\"javascript:close_right2();\" title=\"关闭上面的广告\">×<\/a>");
document.writeln("<\/div>");
//------右侧各块结束
document.writeln("<\/div>");
</script>

取消手机端显示

手机端显示效果不好，建议取消，可以用下面的判断语句把HTML代码包裹起来

<?php if (!wp_is_mobile()) { ?>
<!-- 把上面的春联代码复制到这里 -->
<?php } ?>

设置仅首页显示

如果只想在首页显示，可以用下面的判断语句把HTML代码包裹起来：

<?php if (is_home()) { ?>
<!-- 把上面的春联代码复制到这里 -->
<?php } ?>