1

I'm using the following jQuery plugin: http://keith-wood.name/imageCube.html

I'm setting up a custom grid based design, here is my 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>

here is my css:

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

here is my 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>

I have also setup a fiddle: http://jsfiddle.net/d9gN5/1/

I have setup a hover event on #basicCube1, which works fine. The problem I have is that when you stay hovered on the element, it keeps rotating. Once hovered I would like the rotation to stop until the element is not hovered on anymore.

Is this achievable with this plugin? I have read through the documentaion here: http://keith-wood.name/imageCubeRef.html and nothing seems to stand out.

4

2 回答 2

0

这是因为图像的旋转/变化触发了元素本身的悬停事件。

为了解决我使用mouseenter和mouseleave事件的问题，以及一个全局范围的变量 ( entered) 作为信号量来了解元素是否已经输入：

$(function () {
    $('#basicCube1').imagecube({
        pause: 100,
        direction: 'left',
        repeat: false
    });
    $('#basicCube2').imagecube();
    $('#basicCube3').imagecube();
    $('#basicCube4').imagecube();
    $('#basicCube5').imagecube();
    $('#basicCube6').imagecube();
    $('#basicCube7').imagecube();
    $('#basicCube8').imagecube();
    $('#basicCube9').imagecube();
});

var entered = false;

$(document).ready(function () {

    $("#basicCube1").mouseenter(function () {
        if (entered) {
            $('#basicCube1').imagecube('stop');
            return
        }
        $('#basicCube1').imagecube('start');
        entered = true;
    });

    $("#basicCube1").mouseleave(function () {
        entered = false;
        $('#basicCube1').imagecube('stop');
    });

});

工作演示：jsFiddle

于 2013-07-24T12:33:25.930 回答
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 回答