悬停时自动滚动图像比容器高 [英] Auto scroll image taller than container on hover

问题描述

我想要一个脚本/ css，这样在悬停比它高的容器的图像时，它将在容器内自动滚动，并在悬停时回到其原始位置。
我真的很糟糕的JavaScript仍然我找到了一个代码，但它似乎并没有工作。

HTML

 < span class =komal dhiraj > 
< img width =300pxheight =autosrc =http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.pngstyle =top ：0px/>< / span> 
  

CSS

  .komal {
 border-radius：5px 5px 5px 5px; 
 float：left; 
 height：80px; 
 margin-left：3px; 
 overflow：hidden; 
职位：亲属; 
 width：300px; 
 border：5px solid #DDD;} 
 img {
 position：absolute; 
转换：top 1s缓出0;} 
  

JS

  $（document）.ready（function（）{
 var xH 
'（'。dhiraj'）。hover（ 
函数（）{
 xH = $（this）.children（img）.css（height）; 
 xH = parseInt（xH）; 
 xH = xH  -  150; 
 xH = - + xH +px; 
 $（this）.children（img）.css（top，xH）; 
} ，函数（）{
 $（this）.children（img）.css（top，0px）; 
} 
）; 
}）; 
  

我在Jsfiddle中创建了一个小例子 http://jsfiddle.net/VuTYx/1/

请帮我解决。 http://jsfiddle.net/VuTYx/2/

通过添加如下内容，确保jQuery正确包含在您的项目中：

 < script src =// ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"> ;</script> 
  

I want a script/css such that on hovering a image which is taller than the container it is in will auto scroll inside the container and will come back to its original position on hover out. I am really bad at javascript still I have found a code for this but it does not seem to work.

The HTML

<span class="komal dhiraj">
<img width="300px" height="auto" src="http://dribbble.s3.amazonaws.com/users/197532/screenshots/1145931/freebie-1.png" style="top: 0px" /></span>

The 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: top 1s ease-out 0s;}

The 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");
}
);
}); 

I have created a small example in Jsfiddle at http://jsfiddle.net/VuTYx/1/

Please help me out.

解决方案

Your JS appears to have been working, but the code included jQuery while the Fiddle didn't have jQuery enabled. I enabled jQuery and it seems to work as you described: http://jsfiddle.net/VuTYx/2/

Make sure that jQuery is correctly included in your project by adding something like:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

这篇关于悬停时自动滚动图像比容器高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！