当前位置:记磊博客 > 主题/优化 > WordPress > 正文

作者:记磊博客

比较忧愁,比较善感,比较孩子气,比较喜欢网络技术的小子

手机扫码查看

wordpress代码添加对联效果跟谁屏幕移动两侧广告

摘要:根据自己的喜好定制好自己的对联图片,并获取图片地址,这里建议使用//,避免 HTTP 和 HTTPS 之间转换的麻烦

wordpress代码添加对联效果跟谁屏幕移动两侧广告
对联会出现在屏幕两侧,如果滚动下啦,会跟随屏幕移动,效果如下图!
wordpress代码添加对联效果跟谁屏幕移动两侧广告
将对联代码放置主题根目录 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=https://ww2.sinaimg.cn/large/006L9ZBBly1fuwhd91sbij30260gowg6.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=https://ww2.sinaimg.cn/large/006L9ZBBly1fuwhdj7jpnj30260go0uf.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}}

代码中的 max-width 值1500可根据自己的需要而设定,比如很多笔记本电脑的分辨率是1440,显示了就会影响两旁的内容展示,毕
竟每次要去关闭两张图片会很烦,而且你放在 footer.php 里面可是每个页面都有的。
至于对联的各种特效,如跟随屏幕而移动、是否显示关闭按钮等都已经写在代码里面,大家可以自行修改

记磊博客文章说明:

作者:记磊博客, 转载或复制请以 超链接形式 并注明出处 记磊博客
原文地址:https://www.ly522.com/1925.html 发布于2018-09-03。
如果我的文章帮助到了你,或者给你产生了些许spark ,欢迎(-(赞助打赏)-)

您阅读这篇文章共花了: 0小时00分00秒
分享到:
赞(0) 打赏

评论-加入了一言 抢沙发

7 + 7 =


wordpress代码添加对联效果跟谁屏幕移动两侧广告

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

时光里的点滴

应广大网友需求记磊工具箱源码需求,开通交流群, 目前禁言。资源已经上传。群稳定后开放

快速加群

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录