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

郑重承诺丨优站网提供安全交易、信息保真!
增值服务:
自动发货
网盘下载
安装指导
环境配置
二次开发
网站建设
¥ 0 (VIP免费升级VIP开通VIP尊享优惠特权
立即下载 升级会员 购买教程 售后支持
详情介绍

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

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

教程开始:

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

<SCRIPT language="JavaScript">
lastScrollY = 0;
function heartBeat(){
var diffY;
if (document.documentElement &amp;& 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,但它们在每个页面上都有。至于对联的特效,比如随屏移动,是否显示关闭按钮等。,都已经写在代码里了,你可以自己修改

资源下载此资源仅限注册用户下载,请先
客服QQ:1427707223
收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明   ⚠️ 1. 本站所有资源来源于网络收集,若资源侵犯了您的合法权益, 请来信通知我们(Email: 1427707223@qq.com),我们会及时删除,给您带来的不便,我们深表歉意! 2. 分享目的仅供大家学习和交流,若使用商业用途,请购买正版授权! 否则产生的一切后果将由下载用户自行承担! 3. 会员不得使用于非法商业用途,不得违反国家法律。否则后果自负! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 6. 因源码具有可复制性,一经购买 ,不得以任何形式退款。 7.更多详情请点击查看

优站网 wordpress美化 WordPress添加跟随屏幕对联广告代码 https://www.zhanceo.com/20888.html

诚乃立身之本、信为道德之基

常见问题
  • 如果付款后没有弹出下载页面,多刷新几下,有问题联系客服!
查看详情
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情

相关文章

联系官方客服

为您解决烦忧 - 24小时在线 专业服务

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