悬停时自动滚动图像比集装箱高
悬停时自动滚动图像比集装箱高
提问于 2013-11-04 12:40:48
我想要一个脚本/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中创建了一个小例子
请帮帮我。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-04 12:45:44
您的JS似乎一直在工作，但是代码包含了jQuery，而Fiddle没有启用jQuery。我启用了jQuery，它似乎像您所描述的那样工作：http://jsfiddle.net/VuTYx/2/
通过添加以下内容，确保jQuery正确地包含在项目中：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>Stack Overflow用户
发布于 2013-11-04 13:02:41
不需要Jquery仅由Css提供
参见此链接
仅限于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; }
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19767913
复制相关文章
相似问题
腾讯云开发者
