日月交替特效 给网站添加华丽时钟-WP酷

 

首先感谢代码作者一堵墙为我们带来此特效。根据时间显示不同的日出日落，4 点之前月亮会一直在顶端，6 点之前月亮落下，10 点之前太阳出来了，17 点之前太阳一直在顶端，19 点之前太阳落下，21 点之前月亮升起，23 点之前月亮一直在顶端。

 

1、两行代码实现（不推荐）

%MINIFYHTML3dbe891e5eb3f89f4326844f1bf915d43%%MINIFYHTML3dbe891e5eb3f89f4326844f1bf915d44%

如果 header.php 中已经引用了 jQuery 库可以删除第一行代码，可以直接将代码放置在 /body 的前面。

此方法引用的是位于作者博客的 JS 代码，如果不嫌麻烦建议使用第二种方法。

 

2、自行创建 JS 文件

创建一个 moon_sun.js，添加如下代码：

function moonUp()
{
    document.write("");
    document.write("日月交替特效 给网站添加华丽时钟-WP酷");
    $(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("日月交替特效 给网站添加华丽时钟-WP酷");
    $(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("日月交替特效 给网站添加华丽时钟-WP酷");
    $(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("日月交替特效 给网站添加华丽时钟-WP酷");
    $(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("日月交替特效 给网站添加华丽时钟-WP酷");
    $(document).ready(function(){
    $(".moon").fadeOut(0);
    $(".moon").fadeIn(1000);
    $(".moon").delay(1000);
    $(".moon").fadeOut(1000);
    $(".moon").hide(0);
});
}
function sunStop()
{
    document.write("");
    document.write("日月交替特效 给网站添加华丽时钟-WP酷");
    $(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
 
下载如下两幅图片：
日月交替特效 给网站添加华丽时钟-WP酷
 
日月交替特效 给网站添加华丽时钟-WP酷
将两幅图片上传至网站的任意目录，记下两幅图片的图片地址。
之后，将上面代码中所出现的
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 中添加如下代码：
%MINIFYHTML3dbe891e5eb3f89f4326844f1bf915d45%%MINIFYHTML3dbe891e5eb3f89f4326844f1bf915d46%
 
 
大功告成！