为wordpress两侧添加对联效果,并跟随屏幕移动

对联会出现在屏幕两侧,如果滚动下啦,会跟随屏幕移动,效果如下图!

相关代码与方法

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

将对联代码放置主题根目录 footer.php 中的 代码之前,代码如下:

  1. <SCRIPT language=“JavaScript”>  
  2. lastScrollY = 0;  
  3. function heartBeat(){  
  4. var diffY;  
  5. if (document.documentElement && document.documentElement.scrollTop)  
  6. diffY = document.documentElement.scrollTop;  
  7. else if (document.body)  
  8. diffY = document.body.scrollTop  
  9. else  
  10. {/*Netscape stuff*/}  
  11. //alert(diffY);  
  12. percent=.1*(diffY-lastScrollY);  
  13. if(percent>0)percent=Math.ceil(percent);  
  14. else percent=Math.floor(percent);  
  15. document.getElementById(“leftDiv”).style.top = parseInt(document.getElementById(“leftDiv”).style.top)+percent+“px”;  
  16. document.getElementById(“rightDiv”).style.top = parseInt(document.getElementById(“rightDiv”).style.top)+percent+“px”;  
  17. lastScrollY=lastScrollY+percent;  
  18. //alert(lastScrollY);  
  19. }  
  20. //下面这段删除后,对联将不跟随屏幕而移动。  
  21. window.setInterval(“heartBeat()”,1);  
  22. //–>  
  23. //关闭按钮  
  24. function close_left2(){  
  25.  left2.style.visibility=’hidden’;  
  26. }  
  27. function close_right2(){  
  28.  right2.style.visibility=’hidden’;  
  29. }  
  30. //显示样式  
  31. document.writeln(“<style type=\”text\/css\”>”);  
  32. document.writeln(“#leftDiv,#rightDiv{position:absolute;}”);  
  33. document.writeln(“.itemFloat{width:100px;height:auto;line-height:5px}”);  
  34. document.writeln(“<\/style>”);  
  35. //以下为主要内容  
  36. document.writeln(“<div id=\”leftDiv\” style=\”top:112px;left:50px\”>”);  
  37. //——左侧各块开始  
  38. //—L2  
  39. document.writeln(“<div id=\”left2\” class=\”itemFloat\”>”);  
  40. document.writeln(“<img border=0 src=//www.dujin.org/images/duilianz.jpg>”);  
  41. document.writeln(“<br><a href=\”javascript:close_left2();\” title=\”关闭上面的广告\”>×<\/a>”);  
  42. document.writeln(“<\/div>”);  
  43. //——左侧各块结束  
  44. document.writeln(“<\/div>”);  
  45. document.writeln(“<div id=\”rightDiv\” style=\”top:112px;right:50px\”>”);  
  46. //——右侧各块结束  
  47. //—R2  
  48. document.writeln(“<div id=\”right2\” class=\”itemFloat\”>”);  
  49. document.writeln(“<img border=0 src=//www.dujin.org/images/duiliany.jpg>”);  
  50. document.writeln(“<br><a href=\”javascript:close_right2();\” title=\”关闭上面的广告\”>×<\/a>”);  
  51. document.writeln(“<\/div>”);  
  52. //——右侧各块结束  
  53. document.writeln(“<\/div>”);  
  54. </SCRIPT>  

然后,将图片地址替换成自己的对联图片。为了更好的去适应访客效果,建议在低于1500分辨率(包括手机端)的终端设备上不显示对联特效,所以,加入了一下css样式。

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

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

人已赞赏
在线工具文章

分享6个网站制作过程中涨姿势的功能网站,记得收藏哟!

2018-3-3 15:34:34

在线工具文章

分享一个百度网盘下载不限速的方法 Proxyee-down与PanDownload

2018-3-25 9:39:26

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索