1

次の jQuery プラグインを使用しています: http://keith-wood.name/imageCube.html

カスタム グリッド ベースのデザインをセットアップしています。これが私の js です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>
<script type="text/javascript">

$(function () {
    $('#basicCube1').imagecube({pause:100, direction:'left', repeat:false});
});

$(document).ready(function() {

$("#basicCube1").hover(
  function () {
    $('#basicCube1').imagecube('start');

  },
  function () {
    $('#basicCube1').imagecube('stop');
  }
);

});
</script>

ここに私のCSSがあります:

#container{width:450px;}
#basicCube1 { width: 150px; height: 150px; float:left; }

ここに私のhtmlがあります:

<div id="container">
<div id="basicCube1">
<img src="http://keith-wood.name/img/uluru.jpg" alt="Uluru" title="Uluru">
<img src="http://keith-wood.name/img/islands.jpg" alt="Islands" title="Islands">
</div>
</div>

フィドルもセットアップしました：http://jsfiddle.net/d9gN5/1/

でホバーイベントをセットアップしましたが#basicCube1、正常に動作します。私が抱えている問題は、要素にカーソルを合わせたままにしておくと、回転し続けることです。ホバーしたら、要素がホバーされなくなるまで回転を停止したいと思います。

これはこのプラグインで達成できますか? ここのドキュメンテーションを読みました: http://keith-wood.name/imageCubeRef.html何も目立たないようです。

4

2 に答える 2

0

これが私がそれを解決した方法です。「afterRotate」関数を使用する必要がありました：

$('#basicCube1').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate1, segments:100}); 
$('#basicCube2').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate2}); 
$('#basicCube3').imagecube({pause:1000, direction:'left', repeat:false, afterRotate: endedRotate3}); 
$('#basicCube4').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate4}); 
$('#basicCube5').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate5}); 
$('#basicCube6').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate6}); 
$('#basicCube7').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate7}); 
$('#basicCube8').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate8}); 
$('#basicCube9').imagecube({pause:100, direction:'left', repeat:false, afterRotate: endedRotate9});

動作していることを示す更新されたフィドル: http://jsfiddle.net/d9gN5/4/

于 2013-07-24T13:24:54.857 に答える