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=左图片地址>");
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=右图片地址>");
document.writeln("<br><a href="javascript:close_right2();" title="关闭上面的广告">×</a>");
document.writeln("</div>");
//------右侧各块结束
document.writeln("</div>");
</script>
以下是针对 本站点风格 的 修改版 ,添加在主题设置-自定义- Javascript 内容里面
注意去掉:<script language="JavaScript">
和 </script>
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:55px;left:30px">");
//------左侧各块开始
//---L2
document.writeln("<div id="left2" class="itemFloat">");
document.writeln("<img border=0 src=左图片地址>");
document.writeln("<br><a href="javascript:close_left2();" title="点击关闭">×</a>");
document.writeln("</div>");
//------左侧各块结束
document.writeln("</div>");
document.writeln("<div id="rightDiv" style="top:55px;right:10px">");
//------右侧各块结束
//---R2
document.writeln("<div id="right2" class="itemFloat">");
document.writeln("<img border=0 src=右图片地址>");
document.writeln("<br><a href="javascript:close_right2();" title="点击关闭">×</a>");
document.writeln("</div>");
//------右侧各块结束
document.writeln("</div>");
装饰图片建议:70px*260px
调整低于多少分辨率自动隐藏
将图片地址替换成自己的对联图片。为了更好的去适应访客效果,建议在低于1500分辨率(包括手机端)的终端设备上不显示对联特效,所以,加入了一下css样式。
@media (max-width:1500px){#leftDiv,#rightDiv{display:none !important}}
代码中的 max-width
值1500
可根据自己的需要而设定,比如很多笔记本电脑的分辨率是1440
,显示了就会影响两旁的内容展示,毕竟每次要去关闭两张图片会很烦,而且你放在 footer.php
里面可是每个页面都有的。至于对联的各种特效,如跟随屏幕而移动、是否显示关闭按钮等都已经写在代码里面,大家可以自行修改 。
类别:WordPress技巧、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!