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

 

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

 

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

如果 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<=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();
}

 

下载如下两幅图片：

日月交替特效 给网站添加华丽时钟-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 中添加如下代码：

 

 

大功告成！