1

ユーザーが画像にカーソルを合わせたときに画像を拡大し、ユーザーが画像をマウスアウトした後に画像のサイズを縮小しようとしています。

私は次のコードを持っています

$('#image_layout').on('hover','img',function(){
    $(this).css('width','110%');
})

$('#image_layout').on('mouseout','img',function(){
    $(this).css('width','90%');
})

画像の一番上の左の位置からではなく、画像の中央の位置から画像を拡大したい。

私が持っているもの：

 ----        ------
|    |  ->  |      |
 ----       |      |
             ------

私が欲しいもの:(画像の中央から画像を拡大します）

               ------
   ----       |      | 
  |    |  --> |      |
   ----       |      |
               ------

これを達成する方法がわかりません。任意のヒント？どうもありがとう！

4

5 に答える 5

2

単純なCSSの調整で処理できるタスクにJavaScriptを使用することは避け、ページ上のJavaScriptの重みを重くしないでください。

#image_layout 
{
   width : /* initial width value */ 
   height: /* initial height value */
}


#image_layout : hover
{
   width : /* new width value */ 
   height: /* new height value */
   /* use of multiple tranistions */
   transition : all 0.2s ease-out 
}

jQueryの方法に関しては、.css（）を2回適用する必要はなく、プロパティとその値を含むオブジェクトを渡すだけです。

$('#image_layout').on('mouseout','img',function(){
    $(this).css({'width':'90%', 'height':'100%'});
});
于 2012-08-06T22:49:26.233 に答える
1

を変更しwidth、まだ定義してheightいない場合、ブラウザは自動的にそれらの間の比率を維持するため、ともになりheightます。110%90%

このコードを試してください：

$('#image_layout').on('hover','img',function(){
    $(this).css('width','110%')
        .css('height','100%')
});
$('#image_layout').on('mouseout','img',function(){
    $(this).css('width','90%')
        .css('height','100%');
});
于 2012-08-06T22:40:32.717 に答える
1

あなたが達成したいことは、思ったほど簡単ではありません。コンテナの中心に原点を維持したい場合は、コンテナに対して画像を絶対位置に配置する必要があります。このlilプラグインを試してみてください。おそらくすべてのケースで機能するとは限りませんが、試してみる価値はあります。

$.fn.centerIt = function(){

    var height = this.outerHeight(),
        width = this.outerWidth();

    this.css({
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -(height/2),
        marginLeft: -(width/2)
    })
    .parent()
    .css('position', 'relative');

    return this;    
};

$('img').css('width', '90%').centerIt();

デモ： http： //jsfiddle.net/elclanrs/RMsSh/

于 2012-08-06T22:45:13.493 に答える
0

JQueryで画像サイズを変更するのはとても簡単です。これまたは.CSS（）を使用したCSSアプローチを採用できます

$('#imageId').width(150).height(100);
于 2012-08-06T22:39:16.480 に答える
0

そのためには、画像を水平方向と垂直方向の中央に配置する必要があります。

于 2012-08-06T22:44:18.977 に答える