首先感谢代码作者一堵墙为我们带来此特效。根据时间显示不同的日出日落,4 点之前月亮会一直在顶端,6 点之前月亮落下,10 点之前太阳出来了,17 点之前太阳一直在顶端,19 点之前太阳落下,21 点之前月亮升起,23 点之前月亮一直在顶端。
1、两行代码实现(不推荐)
如果 header.php 中已经引用了 jQuery 库可以删除第一行代码,可以直接将代码放置在 /body 的前面。
此方法引用的是位于作者博客的 JS 代码,如果不嫌麻烦建议使用第二种方法。
2、自行创建 JS 文件
创建一个 moon_sun.js,添加如下代码:
function moonUp() { document.write(""); document.write(""); $(document).ready(function(){ $(".moon").fadeOut(0); $(".moon").fadeIn(1000); $(".moon").animate({top:"1%"},1000); $(".moon").fadeOut(1000); $(".moon").hide(0); }); } function sunUp() { document.write(""); document.write("
"); $(document).ready(function(){ $(".sun").fadeOut(0); $(".sun").fadeIn(1000); $(".sun").animate({top:"1%"},1000); $(".sun").fadeOut(1000); $(".sun").hide(0); }); } function moonDown() { document.write(""); document.write("
"); $(document).ready(function(){ $(".moon").fadeOut(0); $(".moon").fadeIn(1000); $(".moon").animate({top:"40%"},1000); $(".moon").fadeOut(1000); $(".moon").hide(0); }); } function sunDown() { document.write(""); document.write("
"); $(document).ready(function(){ $(".sun").fadeOut(0); $(".sun").fadeIn(1000); $(".sun").animate({top:"40%"},1000); $(".sun").fadeOut(1000); $(".sun").hide(0); }); } function moonStop() { document.write(""); document.write("
"); $(document).ready(function(){ $(".moon").fadeOut(0); $(".moon").fadeIn(1000); $(".moon").delay(1000); $(".moon").fadeOut(1000); $(".moon").hide(0); }); } function sunStop() { document.write(""); document.write("
"); $(document).ready(function(){ $(".sun").fadeOut(0); $(".sun").fadeIn(1000); $(".sun").delay(1000); $(".sun").fadeOut(1000); $(".sun").hide(0); }); } var day=new Date(); var D=day.getHours(); if (D<=4) { moonStop(); } else if(D<=6) { moonDown(); } else if(D<=10) { sunUp(); } else if(D<=17) { sunStop(); } else if(D<=19) { sunDown(); } else if(D<=21) { moonUp(); } else if(D<=23) { moonStop(); }
下载如下两幅图片:
将两幅图片上传至网站的任意目录,记下两幅图片的图片地址。
之后,将上面代码中所出现的
http://tupian.yiduqiang.com/wp-content/uploads/js/moon_sun/the_moon.png
http://tupian.yiduqiang.com/wp-content/uploads/js/moon_sun/the_sun.png
依次更换为刚刚上传两幅图片的图片地址。
将代码中出现的
http://www.yiduqiang.com/
更改为你的博客地址。
更改完成后,上传 moon_sun.js 至网站任意目录,记录下它的所在位置。
在 header.php 中添加如下代码:
大功告成!