Двигающаяся .gif помогите
Вложений: 1
Нужно заставить двигаться .gif изображение с левого края экрана к правому по кнопке start и stop, что бы остановить. Также двигаться быстрее по кнопке быстрее. И в обратном порядке с правой стороны экрана к левой. Не стоит обращать внимание на гифку... она двигается сама по себе, как будто это просто картинка, объект. двигать нужно его.. Помогите пожалуйста
|
staseward, со скоростью не логично будет, так как скорость гифки одна и та же.
|
не стоит обращать внимание на гифку... она двигается сама по себе, на это не обращаем внимание, как будто это просто картинка, объект. двигать нужно его..
|
http://learn.javascript.ru/play/Gz53qc
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.cat {
background: url('http://javascript.ru/forum/attachments/misc/2547d1421926832t-dvigayushhayasya-gif-pomogite-cat-walk-gif');
bottom: 0;
left: 0;
height: 100px;
position: fixed;
width: 100px;
}
</style>
</head>
<body>
<div class="cat"></div>
<div>Speed: <input id="cat-speed" type="text" value="1"></div>
<input onclick="startCat()" type="button" value="start">
<input onclick="stopCat()" type="button" value="stop">
<script>
var cat = document.querySelector('.cat'),
catSpeedElem = document.getElementById('cat-speed'),
catIsAnimated, catIntervalID,
catWidth = cat.clientWidth,
displayWidth = window.innerWidth;
function startCat() {
if(catIntervalID) stopCat();
var speed = (+catSpeedElem.value || 1) / 10,
selfStyle = cat.style,
x = 0;
catIntervalID = setInterval(function() {
x += speed;
selfStyle.left = x + 'px';
if(x >= displayWidth - catWidth) stopCat();
}, 5);
};
function stopCat() {
clearInterval(catIntervalID);
catIntervalID = null;
};
</script>
</body>
</html>
|
спасибо, все работает, ток есть 2 проблемы, сама гифка теперь не двигаеться и когда запускаю через браузер chrome, гиффка ниже экрана находиться(ее не видно)... как это исправить?
|
спасибо, все работает, ток есть 2 проблемы, сама гифка теперь не двигаеться и когда запускаю через браузер chrome, гиффка ниже экрана находиться(ее не видно)... как это исправить?
|
staseward, ширину и высоту в стилях поменял?
|
| Часовой пояс GMT +3, время: 15:18. |