我想要一个脚本/css,这样当悬停一个比容器高的图像时,它会自动滚动到容器内,并在悬停时返回到原来的位置。 我真的很不擅长 javascript,但我仍然找到了一个代码,但它似乎不起作用。
HTML
<span class="keymel dhiraj">
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>
CSS
.keymel {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;}
img {
position: absolute;
transition: top 1s ease-out 0s;}
JS
$( document ).ready(function() {
var xH
$('.dhiraj').hover(
function() {
xH = $(this).children("img").css("height");
xH = parseInt(xH);
xH = xH - 150;
xH = "-" + xH + "px";
$(this).children( "img" ).css("top",xH);
}, function() {
$(this).children( "img" ).css("top","0px");
}
);
});
我在 http://jsfiddle.net/VuTYx/1/ 的 Jsfiddle 中创建了一个小示例
请帮帮我。
最佳答案
不需要Jquery,只用CSS
看这个link
仅限CSS:
.komal {
border-radius: 5px 5px 5px 5px;
float: left;
height: 80px;
margin-left: 3px;
overflow: hidden;
position: relative;
width: 300px;
border:5px solid #DDD;
}
img {
position: absolute;
transition: all 0.2s ease 0s;
}
.komal:hover >img
{
-moz-animation: border-bounce 3000ms linear;
-webkit-animation: border-bounce 3000ms linear;
}
@-moz-keyframes border-bounce {
0% { margin-top: -10px; }
25% { margin-top: -50px; }
50% { margin-top: -100px; }
75% { margin-top: -50px; }
100% { margin-top: -0px; }
}
@-webkit-keyframes border-bounce {
0% { margin-top: -10px; }
25% { margin-top: -50px; }
50% { margin-top: -100px; }
75% { margin-top: -50px; }
100% { margin-top: -0px; }
}
关于javascript - 悬停时自动滚动图像高于容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19767913/