zoukankan      html  css  js  c++  java
  • jquery插件实现图片延迟加载(lazyload.js)

    http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>图片加载技术实例-欢迎关注tinyphp的博客</title>
    <SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
    <SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>
    <script type="text/javascript" charset="utf-8">
          $(function() {
              $("img").lazyload({
              placeholder : "images/loading.gif",
                     effect: "fadeIn"
               });  
          });
    </script>
    <style>
    img a,img{border:0px;}
    div{ margin-bottom:10px;}
    </style>
    </head>
    <body>
    <img src="images/0.jpg" /><br />
    <div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div>
    <div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div>
    </body>
    </html>

    fadeIn()

    fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的。

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
      $("p").fadeOut()
      });
      $(".btn2").click(function(){
      $("p").fadeIn();
      });
    });
    </script>
    </head>
    <body>
    <p>This is a paragraph.</p>
    <button class="btn1">Hide</button>
    <button class="btn2">Show</button>
    </body>
    </html>

    描述:对一个元素应用动画特效。

    返回:jQuery

    .effect( effect [, options ] [, duration ] [, complete ] )
  • 相关阅读:
    23.课程应用接口
    22.课程页面设计
    21.手机接口
    20.云通讯
    19.JWT
    18.权限认证
    解决github下载慢的终极方法
    vs code 配置c/c++环境
    Python 字符编码处理总结
    Python编码
  • 原文地址:https://www.cnblogs.com/sunyq/p/6044051.html
Copyright © 2011-2022 走看看