WordPress添加跟随屏幕新年对联特效

这是创客云为了年前营造博客新年氛围,给博客添加新年对联的文章,现在发布虽然有点过时了,但是大家可以留着年底继续用,啊哈哈哈哈……代码还是可以给大家分享一下,顺便把自己的对了给撤了,就在此截图留个纪念吧!
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 里面可是每个页面都有的。至于对联的各种特效,如跟随屏幕而移动、是否显示关闭按钮等都已经写在代码里面,大家可以自行修改。

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/85070

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买