Question

我正在尝试使用Jquery“rotateAnimation”旋转图像并尝试添加一个函数单击每个图像时显示警告消息。警报消息适用于所有图像，除了我使用jquery rotateAnimation方法旋转的图像。

    <div style="position:absolute;top:180px;left:165px;">
    <img id="image10" src="Green.png"  class="clFree" alt="1" border="0">
    <img id="image11" src="Green.png"  class="clFree" alt="2" border="0">
    <img id="image12" src="Green.png"  class="clFree" alt="3" border="0">
    <img id="image13" src="Green.png"  class="clFree" alt="4" border="0">
    </div>


    <div style="position:absolute;top:178px;left:125px;"><img id="image31"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:175px;left:100px;"><img id="image30"   src="Green.png" alt="first" border="0"></div>

    <div style="position:absolute;top:172px;left:75px;"><img id="image29"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:168px;left:50px;"><img id="image28"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:160px;left:22px;"><img id="image27"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:145px;left:-2px;"><img id="image26"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:120px;left:-15px;"><img id="image25"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:95px;left:-22px;"><img id="image24"   src="Green.png" alt="first" border="0"></div>

    <div title="center" style="position:absolute;top:68px;left:-25px;"><img id="image23" class="clNotFree"   src="Red.png" alt="center" border="0"></div>

    <div style="position:absolute;top:40px;left:-22px;"><img id="image22"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:15px;left:-15px;"><img id="image21"   src="Green.png" alt="first" border="0"></div>
    <div style="position:absolute;top:-6px;left:2px;"><img id="image"   src="Green.png" alt="first" border="0"></div>

    <div style="position:absolute;top:-20px;left:25px;"><img id="image1" src="Green.png" title="fff" alt="f1" border="0"></div>
    <div style="position:absolute;top:-30px;left:50px;"><img id="image2" src="Green.png" alt="2" border="0"></div>
    <div style="position:absolute;top:-35px;left:75px;"><img id="image3" src="Green.png" alt="3" border="0"></div>
    <div style="position:absolute;top:-35px;left:100px;"><img id="image4" src="Green.png" alt="4" border="0"></div>
    <div style="position:absolute;top:-35px;left:125px;"><img id="image5" src="Green.png" alt="5" border="0"></div>
    <div style="position:absolute;top:-35px;left:150px;"><img id="image6" src="Green.png" alt="6" border="0"></div>
    <div style="position:absolute;top:-35px;left:175px;"><img id="image7" src="Green.png" alt="7" border="0"></div>
    <div style="position:absolute;top:-32px;left:212px;"><img id="image8" src="Green.png" alt="33" border="0"></div>
    <div style="position:absolute;top:-32px;left:235px;"><img id="image9" src="Green.png" alt="34" border="0"></div>

    <div style="position:absolute;top:-32px;left:235px;">
    <img id="image10" src="Green.png" alt="1" border="0">
    <img id="image11" src="Green.png" alt="2" border="0">
    <img id="image12" src="Green.png" alt="3" border="0">
    <img id="image13" src="Green.png" alt="4" border="0">
    </div>

这是jquery脚本

<script type="text/javascript">
    $(document).ready(function()
    {
        $('#image').rotateAnimation({angle:-35});
        $('#image1').rotateAnimation({angle:-25});
        $('#image2').rotateAnimation({angle:-16});
        $('#image3').rotateAnimation({angle:-14});
        $('#image4').rotateAnimation({angle:-12});
        $('#image5').rotateAnimation({angle:-10});
        $('#image6').rotateAnimation({angle:-8});
        $('#image7').rotateAnimation({angle:-6});

        $('#image21').rotateAnimation({angle:-60});
        $('#image22').rotateAnimation({angle:-80});

        $('#image23').rotateAnimation({angle:-90});

        $('#image24').rotateAnimation({angle:-100});
        $('#image25').rotateAnimation({angle:-110});
        $('#image26').rotateAnimation({angle:-130});
        $('#image27').rotateAnimation({angle:-150});
        $('#image28').rotateAnimation({angle:-160});
        $('#image29').rotateAnimation({angle:-170});
        $('#image30').rotateAnimation({angle:-175});
        $('#image31').rotateAnimation({angle:-180});

        $("img:not([title])").each(function() {
         $(this).attr("title", $(this).attr("alt"))
        })

        $("img").live("click",function(e) {

        // Methode to alert image ID

        });

    });

请指教。我是JQuery的新手

Answer 1

plugin you're using实际上会破坏<img>并使用<canvas>来处理它（或<rvml:image>元素用于IE）但它确实将元素包装在{{1}中两种方式都使用原始<span>的ID，因此您可以将.live()处理程序与attribute-starts-with selector一起使用，如下所示：

<img>

Click事件不适用于在JQuery中使用rotateAnimation附加的图像

1 个答案: