Question

我正在尝试在每次鼠标悬停时旋转画布，但它只是第一次工作你可以在这里玩它：http://jsfiddle.net/h3Z7j/2/

我将它旋转0度的原因是在加载时将其转换为画布，因为我是第一次加载img。

轮换脚本：http://code.google.com/p/jquery-rotate/downloads/detail?name=jquery.rotate.1-1.js

<div class="gameboard">
    <img width="40" height="40" id="1-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-1" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="1-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
    <img width="40" height="40" id="2-2" src="http://www.netbsd.org/images/download-icon-orange.png" alt="">
</div>

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard canvas").mouseover(function () {
        $(this).rotateLeft();
    });
});

修改
如果还有其他更好的旋转脚本，我会乐意改变它。

Answer 1

问题是因为canvas元素被删除，然后被读回DOM。然后丢失放在它上面的mouseover处理程序。如果您使用delegate附加活动，则可以使用：

$(document).ready(function () {
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        $(this).rotateLeft();
    });
});

虽然我不确定效果是否与您完全相同：）

Example fiddle

Answer 2

基于Rory的答案，您可以通过在mouseover / mouseout上设置标志为true / false来实现每次鼠标悬停一次：

$(document).ready(function () {
    var stopSpin = false;
    $(".gameboard img").each(function () {
        $(this).rotateLeft(0);
    });
    $(".gameboard").delegate('canvas', 'mouseover', function () {
        if (!stopSpin){
            $(this).rotateLeft();
        }
        stopSpin = true;
    });
    $(".gameboard").delegate('canvas', 'mouseout', function () {
        stopSpin = false;
    });
});

请参阅：http://jsfiddle.net/CK5hh/

旋转画布仅在第一次工作

2 个答案: