注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

延迟加载并渐现内容的jquery插件lazyFade

动画 fishcity 4973浏览

延迟加载jquery插件lazyFade

lazyFade可以让一组html元素延迟加载并逐渐显示的jquery插件,lazyFade非常的轻量,只有2KB,当然使用也是非常的简单,一行代码就搞定了,但效果还是相当不错的。

jquery实例:lazyFade的使用方法

引入核心文件

<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js"></script>
<script src="lazyFade.js" ></script>

写入html,这里的html随意,根据您的项目来写就OK了。以下是实例代码

<section class="container">
       <h4>以下内容将延迟加载并渐现</h4>
       <ul class="list-group">
          <li class="list-group-item">Cras justo odio</li>
          <li class="list-group-item">Dapibus ac facilisis in</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
          <li class="list-group-item">Morbi leo risus</li>
          <li class="list-group-item">Porta ac consectetur ac</li>
          <li class="list-group-item">Vestibulum at eros</li>
        </ul>
    </section>

写入JS初始化插件

//不带参数
$(function(){$('.list-group li').lazyFade();})
//带参数
$(function(){
	$(".list-group li").lazyFade({
		everse: false,
		duration: 250,
		delay: 50,
		opacity: {
			start: 0.01,
			end: 1
			}
		});
})

转载请注明:jQ酷 » 延迟加载并渐现内容的jquery插件lazyFade

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。