画像の上にマウスを移動すると画像が回転する

次のスクリプトを使用して、ユーザーが画像の上にマウスを置いてその画像を回転させるとします。画像の上にマウスを移動すると画像が回転する

$("#alcazar-image").rotate({ 
 
    bind: 
 
    { 
 
    mouseover : function() { 
 
    $(this).rotate({animateTo:180}) 
 
    }, 
 
    mouseout : function() { 
 
    $(this).rotate({animateTo:0}) 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row"> 
 
      <div class="media"> 
 
      <div class="media-left media-middle"> 
 
       <a href="#"> 
 
        <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar"> 
 
       </a> 
 
      </div> 
 
      <div class="media-body"> 
 
       <div class="media-heading"><h3>Alcazar Park</h3></div> 
 
       <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
       <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a></p> 
 
      </div> 
 
       
 
      </div> 
 
    </div>

しかし、ホバリング効果は動作しません。何か案は？ありがとう、

Theo。

出典

2017-02-15 Theo

なぜそれのためのjsが必要です。あなたもCSSでこれを行うことができます –

私は知っているが、私はjqueryのスキルを向上させたい。 – Theo

あなたのスニペットにjqueryを追加した後で動作するようです。 –

すべてはあなたがコードスニペットにjQueryとjQueryの-回転プラグインを含めるのを忘れ除いて、以下のコードだと遊んでみてください良いです：

$("#alcazar-image").rotate({ 
 
    bind: { 
 
    mouseover: function() { 
 
     $(this).rotate({ 
 
     animateTo: 180 
 
     }) 
 
    }, 
 
    mouseout: function() { 
 
     $(this).rotate({ 
 
     animateTo: 0 
 
     }) 
 
    } 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/wilq32/jqueryrotate/master/jQueryRotate.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row"> 
 
    <div class="media"> 
 
    <div class="media-left media-middle"> 
 
     <a href="#"> 
 
     <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar"> 
 
     </a> 
 
    </div> 
 
    <div class="media-body"> 
 
     <div class="media-heading"> 
 
     <h3>Alcazar Park</h3> 
 
     </div> 
 
     <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a> 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</div>

出典

2017-02-15 08:27:59

それを聞いてうれしい。そして、あなたはここですべての答えを受け入れることはできません。ちょうど本当にあなたが問題に答える答えを選び、問題を解決してください:)。後で、他のプログラマーが有用であると判明したときにそれを参照する –

JavaScriptやjqueryを使用して、ここで何をしようとしている必要はありません。

シンプルなCSS transform: rotateがあなたのために仕事をするはずです。

img:hover { 
 
    transform: rotate(720deg); 
 
    -ms-transform: rotate(720deg); 
 
    -webkit-transform: rotate(720deg); 
 
    transition: all 1s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://jqueryrotate.com/js/jQueryRotateCompressed.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 center-block" id="alcazar-row"> 
 
    <div class="media"> 
 
    <div class="media-left media-middle"> 
 
     <a href="#"> 
 
     <img src="http://www.theo-android.co.uk/github-images/alcazar.png" class="media-object img-thumbnail" id="alcazar-image" alt="alcazar"> 
 
     </a> 
 
    </div> 
 
    <div class="media-body"> 
 
     <div class="media-heading"> 
 
     <h3>Alcazar Park</h3> 
 
     </div> 
 
     <p style="font-size:20px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     <p style="text-align:left"><a class="btn btn-primary btn-xs" data-toggle="modal" data-target="#alcazarModal"> More&raquo;</a> 
 
     </p> 
 
    </div> 
 

 
    </div> 
 
</div>

出典

2017-02-15 08:26:31 nashcheez

私はrotateで.hover()イベントを使用することをお勧めしたい：

$("#alcazar-image").hover(function() { 
    $(this).toggleClass("rotate-180"); 
});

JsFiddle demo

出典

2017-02-15 08:26:51 urbz

あなたはCSSでそれを行うことができます。

img{ 
    -webkit-transition: -webkit-transform .8s ease-in-out; 
    -ms-transition: -ms-transform .8s ease-in-out; 
    transition: transform .8s ease-in-out; 


} 
img:hover{ 
    transform:rotate(360deg); 
    -ms-transform:rotate(360deg); 
    -webkit-transform:rotate(360deg); 
}

出典

2017-02-15 08:27:07

これだけであなたのjQueryを置き換えます::

$("#alcazar-image").mouseover(function() { 
    $(this).css('transform', 'rotate(180deg)'); 
    $(this).css('-ms-transform', 'rotate(180deg)'); /* IE 9 */ 
    $(this).css('-webkit-transform', 'rotate(180deg)'); /* Chrome, Safari, Opera */ 
}).mouseout(function() { 
    $(this).css('transform', 'rotate(0deg)'); 
    $(this).css('-ms-transform', 'rotate(0deg)'); /* IE 9 */ 
    $(this).css('-webkit-transform', 'rotate(0deg)'); /* Chrome, Safari, Opera */ 
});

perfすべてのブラウザに影響します。

出典

2017-02-15 08:28:33

画像の上にマウスを移動すると画像が回転する

答えて

関連する問題