Поэтому мне нужна помощь, мне нужно создать javascript файл (с соответствующим HTML), который позволяет перемещать изображение слева направо непрерывно. И затем, когда пользователь нажимает кнопку мыши, изображение должно непрерывно перемещаться вверх и вниз.
Я до сих пор пытался сделать первую часть, однако, используя код, я обнаружил, что он не работает для меня, и я не слишком уверен в этом. Я чувствую, что мне не хватает чего-то столь очевидного, но я не могу понять это.
Заранее спасибо.
Это мой код
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);
});
Добавьте обработчик при щелчке по изображению и funcs to 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}
})