用Javascript處理圖像

我正在開發一個項目，需要我爲具有4個圖像和4個複選框的網頁創建一個JavaScript文件。每個複選框都鏈接到一個圖像。當點擊一個複選框時，鏈接到它的圖像應該做一些事情。圖像1應該旋轉，圖像2應該縮小和增長，圖像3會上下移動，圖像4應該左右傾斜。所有這些操作應該繼續，直到複選框未被點擊。用Javascript處理圖像

我覺得對我來說最難的部分是，我們不允許編輯HTML或CSS，我們只能用Javacript文件工作。我無法弄清楚如何將圖片的動作鏈接到複選框（例如，在點擊第一個複選框時使圖片1旋轉）。現在，我主要關注旋轉圖像，因爲如果我能夠弄清楚它是如何工作的，我應該能夠弄清楚如何讓其他3個工作。任何人都可以指出我正確的方向如何使圖像在單擊複選框時執行特定操作？

以下是我在我的JavaScript文件至今：

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

這裏是我的HTML，CSS製作，並在我的JS文件什麼稍微的jsfiddle。 http://jsfiddle.net/k7bt0u17/

來源

2014-09-22 Beth Tanner

http://stackoverflow.com/questions/968642/rotate-image-clockwise-or-anticlockwise-inside-a-div-using-javascript
HTTP：//www.developphp。 COM/view.php？TID = 1307 讓我知道如果這能解決你的問題 – 2014-09-22 06:14:50

的JS視頻教程是非常有益的，發佈這之前，我確實看過了（它實際上是負責我寫的JavaScript點點）但仍然無法弄清楚如何讓圖像在單擊複選框時執行它們應該執行的操作。如果允許我從一開始就爲自己編寫自己的代碼，這是我覺得可以做的事情之一，但是我不知道如何在不編輯現有的HTML的情況下做到這一點，做。 – 2014-09-22 08:02:07

對不起，我以爲你面臨着輪換問題。您的http://jsfiddle.net/k7bt0u17/的原因。它不適用於safari。即使我手動觸發spinPic（）; 如果你知道tagName，className或ID，你可以攻擊事件並在點擊時觸發它們。檢查下面發佈的答案。讓我知道它是否有幫助。 – 2014-09-22 12:20:12

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();} } 
);

來源

2014-09-22 12:07:06

用Javascript處理圖像

回答

相關問題