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