html - 以交互方式旋转图像

Question

是否可以通过鼠标单击来旋转图像？所以我在一个空的 html 页面上有一个图像，并且想要单击并拖动图像，以便它围绕它的中心旋转。您有代码或工作示例吗？

最好的问候，马克

Answer 1

可以使用 java script 来完成。以下只是一个示例代码。

<style type="text/css">
  img.primary   { display: inline; }
  img.secondary { display: none; }
  div.foo:hover img.secondary { display: inline; }
  div.foo:hover img.primary   { display: none; }
</style>

<script type="text/javascript">
function swapImages(container)
{
    for(var child in container.childNodes)
    {
        child = container.childNodes[child];
        if(child.nodeName == "IMG")
            child.className = child.className == "primary" ?
                "secondary" : "primary";
    }   
}

window.onload = function() {
    // Remove the foo class when the page loads, to disable hover
    var chartArea = document.getElementById("chartArea");
    for(var child in chartArea.childNodes)
    {
        child = chartArea.childNodes[child];
        if(child.nodeName == "DIV" && child.className == "foo")
            child.className = "";
    }
}
</script>

<div id="chartArea">
    <div class="foo" onclick="swapImages(this);">
        <img class="primary" src="http://somewhere/piechart1.png" />
        <img class="secondary" src="http://somewhere/barchart1.png" />
   </div>

    <div class="foo" onclick="swapImages(this);">
        <img class="primary" ... />
        <img class="secondary" ... />    
    </div>

   <div class="foo" ....>
</div>