图片加载显示效果(8种效果)

所属分类:UI-加载

 60175  439  查看评论 (8)
分享到微信朋友圈
X
图片加载显示效果(8种效果) ie兼容9


现在很多网站用到的图片加载时淡出效果,它是怎么实现的?下面我们用Loading Effects for Grid Items来实现这个效果。

    使用步骤

    引用


 <script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>


    html


 <ul class="grid effect-4" id="grid">
    <li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
    <li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
    <li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>
    <li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>
    <!-- ... -->
</ul>


    css


 /* Effect 4: fall perspective */
.grid.effect-4 {
    perspective: 1300px;
}
 
.grid.effect-4 li {
    transform-style: preserve-3d;
}
 
.grid.effect-4 li.animate {
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    animation: fallPerspective .8s ease-in-out forwards;
}
 
@keyframes fallPerspective {
    100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
相关插件-加载

jQuery 圆型进度条

jQuery canva圆型进度条,可通参数快速修改进度条
  加载
 35400  339

jQuery顶部加载动画插件loadBar.js

loadBar是一个轻量级的(最小2KB)jQuery插件,当加载内容时,页面顶部显示一个漂亮的动画条。
  加载
 29781  364

申请表单进度表

申请表单进度表
  加载
 36481  498

js环形进度条

js环形进度条,再也不怕js了
  加载
 65942  531

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    zhongxiaopang 0
    2017/1/17 15:04:19

    animation-duration: 0.69993s;" class="animate",这个样式就没加在html上,我用的是vue

    回复
    zhongxiaopang 0
    2017/1/17 15:00:46

    我引用了上面的js文件和css文件,但是图片加载的动画没出现?

    回复
    *上邪!!! 0
    2014/12/23 14:43:00
    这个插件没有延迟加载图片的功能是吗? 回复
    不可不戒 0
    2014/4/3 17:33:00

    此插件需要使用支持html5的浏览器才可以。非常感谢您的测试

    回复
    不可不戒 0
    2014/1/18 19:15:00

    此插件需要使用支持html5的浏览器才可以。非常感谢您的测试。

    回复
    不可不戒 0
    2014/1/17 23:54:00

    您好,非常感谢您的回答,另外也非常感谢您的插件。 昨天一直在倒腾这个插件,一直不成功,可能在您打开我的页面的时候,我在来回的测试,所以没看到。 现在整好了,再次感谢您的插件。但是发现几个问题:http:***.首先 我发现我的这个页面打开后那些图片就会全部进行下载,不是滚动到哪里哪里的图片再下载,不知道是我没弄好还是就是这样设计的,谢谢! 2.我发现几个浏览器打开不正常,我测试了6个浏览器,把情况说一下: 1、 百度浏览器极速模式打开校花模板   排列正常。 兼容模式   图片排列错位。2、 360浏览器极速模式打开 排列正常。 兼容模式打开 排列错位。 3、 IE浏览器排列错位 4、 世界之窗浏览器排列错位  5、 GOOGLE浏览器排列正常 6、 火狐浏览器排列正常

    回复
    济公 0
    2014/1/17 9:10:00

    你提供的地址看不到用这个插件的地方。

    回复
    时光小屋 0
    2014/1/17 2:09:00

    请问我为什么按照上面的几个步骤做了 达不到这个效果啊 我的页面是 ***

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复