WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › 日月交替特效 给网站添加华丽时钟

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

PCDotFan10年前

 

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

 

 

 

大功告成!

 

#日月交替特效
0
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (0)
再想想
    沙发抢一发
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
站长福利:WP百科网WordPress快速仿站教程分享
9年前
优化 WordPress 数据库,提升 WordPress 速度
10年前
去除谷歌服务 – WordPress 国外主题全方位加速
6年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1