Question

我正在开发一个项目，要求我为包含4个图像和4个复选框的网页创建一个javascript文件。每个复选框都链接到一个图像。单击复选框时，链接到它的图像应该执行某些操作。图像1应该旋转，图像2应该缩小和增长，图像3将上下移动，图像4应该左右倾斜。所有这些操作都应该继续，直到取消选中该复选框。

我认为最难的部分是我们不允许编辑HTML或CSS，我们只能使用Javacript文件。我无法弄清楚如何将图片的动作链接到复选框（例如，在单击第一个复选框时使图像1旋转）。现在，我主要专注于旋转图像，因为我认为如果我能弄清楚它是如何工作的，我应该能够弄清楚如何使其他3也工作。当点击一个复选框时，有人能指出我如何使图像执行特定操作的正确方向吗？

到目前为止，我的Javascript文件中包含以下内容：

<script type = "text/javascript">
    function spinPic() {
        rotateAnimation("one",20);
    }
</script>

这是我用HTML，CSS制作的一个jsfiddle，以及我的JS文件中的一点点。 http://jsfiddle.net/k7bt0u17/

Answer 1

function addEvent(element, evnt, funct){
  if (element.attachEvent)
   return element.attachEvent('on'+evnt, funct);
  else
   return element.addEventListener(evnt, funct, false);
}
var spin_checked = false;
addEvent(
    document.getElementById('spin'),
    'click',
    function () { if(!spin_checked){spin_checked = true;spinPic();} }
);

在Javascript中操作图像

1 个答案: