|
Сообщение от Moloch
|
|
а можете сказать как сделать чтобы когда width\height круга стали равными 0. функция остановилась и возобновилась только при нажатии на кнопку?
|
сделать ваш код ещё запутанней?! нет проблем
... туда ... сюда ... обратно ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type='text/css'>
#container{
position:relative;
border: 1px solid #fff;
background-color: #ed7;
width:300px;
height:300px;
overflow:hidden;
}
#krug{
background:url(http://www.rollogrady.org/media/wp-content/uploads/2008/11/mp3ico-150x150.gif) no-repeat ;
background-size:contain;
width: 300px;
height: 300px;
position: absolute;
top: 0;
left:0;
opacity: 1;
border-radius: 50%;
}
</style>
<script>
var rrr, stop = true;
function infinityMove() {
var div1 = document.getElementById('krug'),
left = parseInt(getComputedStyle(div1).left, 10),
width,
opacity = 1,
max2 = 300,
z = document.getElementById ('vkl');
setTimeout(function timer()
{
left += (setWay(left, 150, 0))? 1: -1;
div1.style.left = left+ 'px';
div1.style.top = left+ 'px';
//alert(div1.style.left)
opacity = 1 - (left/150);
width = max2-2*left;
div1.style.opacity = opacity;
div1.style.width = width + 'px';
div1.style.height = width + 'px';
stop && (rrr = setTimeout(timer, 10));
!stop && (z.value = z.value == 'Туда'? 'Сюда': 'Туда');
}, 100
);
}
var setWay = (function()
{
var ltr = true;
return function(position, firstValue, lastValue) {
stop = ltr;
if(position >= firstValue) {
ltr = false;
}
if(position <= lastValue) {
ltr = true;
}
stop = (ltr == stop)
return ltr;
}
}
)();
function clc()
{
clearTimeout(rrr);
infinityMove();
}
</script>
</head>
<body>
<div id ="container">
<div id="krug"></div>
</div>
<input id = "vkl" type="button" value="Туда" onclick="clc();">
</body>
</html>