WordPress DOM加载进度条加强版:animate-color

前几日,去了 留过言@郑勇博客 那里,看到了 Navbar 上的 DOM 加载动画,心痒痒了,打算也搞一个。

大概看了一下 DOM 树,貌似是以类似 jQuery 选择器+width百分比控制的动画加载,明白了道理,做起来也就不难了。

我的动画就加载到了 Navbar 下面的一条线上,刚好也有协同感。

首先

适当位置添加 div :(其实后来在古哥那里找到了不少同类文章,实现方法都大同小异,一般用两个div包裹的多,我这直接用一个就好了。)

之后,在全站的 header 、 sidebar 、 footer 、 content 等地方加入如下代码(里面的百分比自己改,觉得加载到多少了就写多少

之后,在 footer 的最末尾,添加如下代码,用于进度条走到100%时淡出消失:

接着是 CSS ,我贴的是我自己用的,你那里请适当修改,以符合你的主题:

然后.......

就像我空间里所说的

Zone-pic-1

事情是这样的:

看了半天,总觉的没颜色的变化怪怪的.....于是我又开始了折腾。

一开始想的如果是控制颜色变化就加到那个加载 DOM 的控制脚本:

然后,进度条“很给我面子”的只变进度,不变颜色.....

我就郁闷了,古哥,结果如下

google-jq-color

丫的,jQuery的核心库竟然不包含这个方法......

说要是想用,用 jQuery UI 去......

我随即转到 CDNJS 下载了一个 jQuery UI 压缩版,一看大小....我就呵呵了.......(左侧传送门,不信的自己去看)

jquery-ui-min-size

我还是请教了一下一个 Javascript 大神,在指点我的中,我完成了一个“简易”的动画效果变颜色。 jQuery 官方称这种东西叫插件......

由于 jQuery 1.7.2 版本的改动太大,我又用的自己感觉够用的1.6.4版,所以无奈之下写了两个的,一个是针对1.8及以上的,另一个就是1.7.2以下的。文章末尾给出地址。

要使用这个插件,你可以单独加载,也可以插入到已有的js文件中,但是一定要满足以下两点,这个功能才会生效:

  • 一定要加载到 jQuery 的后面
  • 一定要加载到你放置的第一个动画效果的前面

原因大家应该都懂,在此不过多解释。

这个插件在构思的时候就想到,不能只实现变背景颜色的功能,还要变一切能变的 color 属性。

所以,本插件支持:

  • color
  • backgroundColor
  • borderColor
  • 等等

而在选择颜色的方式上支持:

  • HEX
  • RGB
  • Predefine Color Name

所以我觉得应该能满足绝大部分人的需要。

Demo

 

Demo演示传送门点击这里前往Demo演示页面

 

下载

jQuery 1.8 以后的版本:

jQuery 1.7.2 以前的版本:

折腾完,睡......

声明: 本文采用 BY-NC-SA 协议进行授权 | Deamwork
转载请注明转自《WordPress DOM加载进度条加强版:animate-color
本文地址:https://www.deamwork.com/archives/animate-color-in-wordpress-dom-loading-progress-bar.orz6

回复 (1)

  1. 知道91博客 China Google Chrome Windows   / 回复

    这个很有意思啊,呵呵试了一下 :wink:

发表评论 修改评论取消编辑

允许使用的标签 - 您可以在评论中使用如下的 HTML 标签以及属性。

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img src="" alt=""> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

 :mrgreen:  :|  :twisted:  :arrow:  8O  :)  :?  8-)  :evil:  :D  :idea:  :oops:  :P  :roll:  ;)  :cry:  :o  :lol:  :x  :(  :!:  :?:

引用通告 (0)

› 尚无引用通告。

欢迎来到Deamwork! o(∩_∩)o
X