图片高度超过DOM元素节点高度,且父元素添加了overflow:hidden;图片超过高度的部分不会显示,通过鼠标悬浮图片,图片向上滚动的方式显示被截取的部分。
HTML代码:
<div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div>
CSS代码:
.scroll {padding-bottom:50%; overflow:hidden;}
.scroll img {display: block; position: absolute; left:0; top:0; width: 100%; height: auto;}
jQuery代码:
使用requestAnimationFrame
$(function(){
var dom = $('.scroll');
var domh = dom.innerHeight();
var domimg = new Image();
domimg.src = dom.find('img').attr('src');
domimg.onload = function(){
var imgh = dom.find('img').height();
if(imgh > domh){
var diff = imgh - domh;
var scroll;
dom.mouseenter(function(){
var num = 0;
;(function imgscroll(){
scroll = requestAnimationFrame(imgscroll);
if(num < diff){
dom.find('img').css('transform','translateY(-'+ num +'px)');
num++;
}else{
cancelAnimationFrame(scroll);
}
})();
}).mouseleave(function(){
dom.find('img').css('transform','translateY(0)');
cancelAnimationFrame(scroll);
})
}
}
});
使用setInterval
$(function(){
var dom = $('.scroll');
var domh = dom.innerHeight();
var domimg = new Image();
domimg.src = dom.find('img').attr('src');
domimg.onload = function(){
var imgh = dom.find('img').height();
if(imgh > domh){
var diff = imgh - domh;
var scroll;
dom.mouseenter(function(){
var num = 0;
scroll = setInterval(function(){
if(num < diff){
dom.find('img').css('transform','translateY(-'+ num +'px)');
num++;
}
},10);
}).mouseleave(function(){
dom.find('img').css('transform','translateY(0)');
clearInterval(scroll);
})
}
}
});
如果浏览器不支持requestAnimationFrame则使用setInterval