懒加载，图片多的时候缓慢加载效果-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"
   });



});