0

私はclip：rectを使用して画像をサムネイルにクリップしていますが、ロールオーバーでのクリップ長方形の配置をランダム化したいと思います。私のコード：

    $('.itembox').mouseover(function() {
    var img = $(this).find('img');
    var width = img[0].width;
    var height = img[0].height;
    var clipwidth = Math.floor( $(this).width() );
    var clipheight = Math.floor( $(this).height() );

    var widthrange = width - clipwidth;
    var heightrange = height - clipheight;

    var x = Math.floor(Math.random() * widthrange);
    var y = Math.floor(Math.random() * heightrange);
    var x2 = x + clipwidth;
    var y2 = y + clipheight;

    img.css('clip', 'rect('+x+'px '+x2+'px '+y+'px '+y2+'px)');
    $(this).children('.itemboxbg').show();
    $(this).css({'color' : 'white'});

});

プリセットのcssで正常に動作します。

.itemboxbg {
    border: none;
    position:absolute;
    width:193px;
    height:273px;
    z-index:0;
}
.itemboxbg img {
    border: none; 
    position: absolute; 
    clip: rect(0px 193px 273px 0px); 
}

ただし、ロールオーバーイベントが発生し、cssが変更されると、画像が消えます。cssは問題ありません。例：

<img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);">

どんな助けでもいただければ幸いです。

4

1 に答える 1

0

ばかげているはずです：

img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)');

クリップ：rectが定義されているので

rect(<top> <right> <bottom> <left>);

ここで<top>、および<bottom>はボックスの上部境界端からのオフセットを指定し、およびはボックス<right>の<left>左側境界端からのオフセットを指定します。

まだ解決策ではありませんが、画像がボックス内に表示されないため、代わりに背景位置を使用する必要があります

編集：わかりました。絶対的な左と上の位置を変更すると、画像がボックスに戻ります。

img.css('left', -x+'px');
img.css('top', -y+'px');
于 2012-12-19T02:00:21.643 に答える