移動圖像從左到右javascript

所以我需要幫助，我需要創建一個JavaScript文件（與HTML匹配），允許圖像從左到右連續移動。然後，當用戶單擊鼠標按鈕時，圖像必須不斷上下移動。移動圖像從左到右javascript

我到目前爲止我試圖做第一部分，但是使用代碼我發現它不適用於我，我不太清楚爲什麼。我覺得我錯過了那麼明顯的東西，但我無法弄清楚。

在此先感謝。

這是我的代碼

HTML：

<html> 
<head> 
<title>Task 2</title> 
<link rel="stylesheet" type="text/css" href="task2.css"> 
<script src="task2.js"></script> 

<div id="animate">Sample</div> 
</head> 
</html>

CSS：

#animate { 
    position: relative; 
    border: 1px solid green; 
    background: yellow; 
    width: 100px; 
    height: 100px; 
}

的JavaScript：

(document).ready(function() { 
    var width = (document).width(); 

    function goRight() { 
     ("#animate").animate({ 
     left: width 
     }, 5000, function() { 
     setTimeout(goLeft, 50); 
     }); 
    } 
    function goLeft() { 
     ("#animate").animate({ 
     left: 0 
     }, 5000, function() { 
     setTimeout(goRight, 50); 
     }); 
    } 

    setTimeout(goRight, 50); 
});

來源

2014-05-06 Madie

哪裏jQuery的$？ –

它不接受它們，控制檯回來說未定義的標識符或類似的錯誤，這是因爲我已經將它保存爲.js嗎？ – Madie

您還需要加載jquery庫。 – Haroldchen

圖像和funcs中上單擊添加處理程序UPDOWN：

function goUp() { 
    $("#animate").animate({ 
    top: 0 
    }, 5000, function() { 
    setTimeout(goDown, 50); 
    }); 
} 
function goDown() { 
    $("#animate").animate({ 
    top: height 
    }, 5000, function() { 
    setTimeout(goUp, 50); 
    }); 
} 
$("#animate").on('click',function(){$('#animate').stop(); 
       if(upleft == 0) 
       {goDown(); upleft=1;} 
           else {goLeft();upleft=0} 
})

FIDDLEEXAMPLE

來源

2014-05-06 06:28:49 deadulya

非常感謝你！ – Madie

即時通訊不知道爲什麼，但點擊功能不工作，它會完美的工作，但不是當我實施它時？ – Madie

我想你需要添加jquery腳本，用於使用動畫功能http://jquery.com/ – deadulya

移動圖像從左到右javascript

回答

相關問題