zoukankan      html  css  js  c++  java
  • 懒加载,图片多的时候缓慢加载效果-08

    /* 公共图片hover效果 注意图片容器一定要定宽高,然后加overflow: hidden;样式 */
    img.animation{-webkit-transition: all 300ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms;}
    img.animation:hover{-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

     

                      <li><a href="#" target="_blank"><img width="220" height="220" data-original="images/tu1.jpg" src="images/jz.gif"></a></li>
                       <li><a href="#" target="_blank"><img width="220" height="220" data-original="images/tu1.jpg" src="images/jz.gif"></a></li>
                       <li><a href="#" target="_blank"><img width="220" height="220" data-original="images/tu1.jpg" src="images/jz.gif"></a></li>
                       <li><a href="#" target="_blank"><img width="220" height="220" data-original="images/tu1.jpg" src="images/jz.gif"></a></li>

    <div class="fh"><img src="images/fh1.png" width="90" height="34"></div>

    .fh{position: fixed; right:-56px;bottom:20px;z-index:9999; cursor:pointer;}

    <script src="https://www.hc360.com/dx/zl/2016/0317/js/loady.js"></script>

    $(document).ready(function(){


        $(".fh").click(function(){
            $('body,html').animate({scrollTop:0},600);
           return false;
        });

    <!--右侧返回-->
    $(".fh").hover(function(){
        
        $(this).animate({right:"0px"},300)
        
        },function(){

        $(this).animate({right:"-56px"},300)

    });

     $("img").lazyload({
          effect : "fadeIn"
       });



    });

  • 相关阅读:
    [leetcode] Rotate Image
    [leetcode] Jump Game II
    [leetcode] Permutations II
    [leetcode] Permutations
    [leetcode] Wildcard Matching
    [leetcode] Multiply Strings
    [leetcode] Trapping Rain Water
    [leetcode] First Missing Positive
    [leetcode] Combination Sum II
    [leetcode] Combination Sum
  • 原文地址:https://www.cnblogs.com/su1637/p/8178356.html
Copyright © 2011-2022 走看看