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

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 に答える