发布价值信息
Wordpress、Software、VPN。。

类似 wow.js 的滚动执行动画插件 JQUERY.FADETHIS.MIN.JS

这篇文章发布时间为2016年12月13日,因年久失修,一些图片或者资源可能已经失效。 如果出现这些问题,请在下面留言,我们会尽快修复。

这款JQ插件与知更鸟的主题效果类似,不过此插件使用方法更加简单,更加轻量级,本来想也给我使用的主题加上,无奈DUX不太适合这种效果,还是懒得折腾了,有兴趣的小伙伴可以折腾折腾。

安装方法:

  1. 先引用jQuery是必须的,不过国内应该大部分主题都已经引用了吧?
     <code class="html plain">&lt;</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"<a href="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js</a>"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">script</code><code class="html plain">&gt;</code>
  2. 引用JQ插件
    <code class="html plain">&lt;</code><code class="html keyword">script</code> <code class="html color1">src</code><code class="html plain">=</code><code class="html string">"dist/jquery.fadethis.min.js"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">script</code><code class="html plain">&gt;</code>
    
  3. 在footer.php文件添加以下代码调用插件:
    &lt;script&gt;$(window).fadeThis();&lt;/script&gt;
    

使用方法:

  1. 出现从左
     <code class="html plain">&lt;</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"slide-left"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">div</code><code class="html plain">&gt;</code>
  2. 出现从右
     <code class="html plain">&lt;</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"slide-right"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">div</code><code class="html plain">&gt;</code>
  3. 出现从上
     <code class="html plain">&lt;</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"slide-top"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">div</code><code class="html plain">&gt;</code>
  4. 出现从下
     <code class="html plain">&lt;</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"slide-bottom"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">div</code><code class="html plain">&gt;</code>

高级用法:

  1. 整个页面设置配置
    $(window).fadeThis({speed: 1000}); 
    <code class="html plain">&lt;</code><code class="html keyword">div</code> <code class="html color1">class</code><code class="html plain">=</code><code class="html string">"slide-left"</code><code class="html plain">&gt;&lt;/</code><code class="html keyword">div</code><code class="html plain">&gt;</code>
  2. 每个块的设置配置
    $('.block').fadeThis({speed: 1000});
    &lt;div class="block"&gt;
     &lt;div class="slide-left"&gt;&lt;/div&gt;
    &lt;/div&gt;
    

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

×
打赏作者
赞(0)           打赏本站
未经允许不得转载:何先生 » 类似 wow.js 的滚动执行动画插件 JQUERY.FADETHIS.MIN.JS
分享到: 更多 (0)

Comments 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

何先生的博客 专注分享 更优质

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

一木禾赚钱网盘:

点击注册