1

我想要一个脚本/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 中创建了一个小示例

请帮帮我。

4

2 回答 2

2

仅通过 Css 不需要 Jquery

看到这个链接

仅限 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;  }
 }
于 2013-11-04T13:02:41.527 回答
0

您的 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>
于 2013-11-04T12:45:44.337 回答