Преди време ме питаха по скайп как да направят една картинка да се скрива ето ви отговора:
Код:
<html>
<head>
<title>Spin</title>
<script type="text/javascript">
function spin(type, id, standart_src, flipped_src)
{
this.interval = null;
this.flag = null;
this.spinSetVar = null;
this.spinGetVar = null;
this.spinSetPos = null;
this.spinGetPos = null;
this.max = null;
this.standart = null;
this.current = null;
this.flipped = null;
this.running = false;
// All properties created
this.standart = new Image();
this.standart.src = standart_src;
this.current = document.getElementById(id);
this.current.src = this.standart.src;
this.flipped = new Image;
this.flipped.src = flipped_src;
this.flag = false;
if (!type)
{
this.spinSetVar = function(variable) { this.current.width = variable; }
this.spinSetPos = function(variable) { this.current.style.left = variable; }
this.spinGetVar = function() { return this.current.width; }
this.spinGetPos = function() { left = this.current.style.left; return eval(left.substring(0, left.length-2)); }
this.max = this.standart.width;
}
else
{
this.spinSetVar = function(variable) { this.current.height = variable; }
this.spinSetPos = function(variable) { this.current.style.top = variable; }
this.spinGetVar = function() { return this.current.height; }
this.spinGetPos = function() { top = this.current.style.top; return eval(top.substring(0, top.length-2)); }
this.max = this.standart.height;
}
this.spinChangeImg = function()
{
this.current.src = (this.current.src == this.standart.src) ? this.flipped.src : this.standart.src;
}
this.spinDoSpin = function(rate)
{
var now = this.spinGetVar();
var pos = this.spinGetPos();
if (!this.flag)
{
this.spinSetVar(now - rate);
this.spinSetPos(pos + (rate/2));
if (!this.spinGetVar())
{
this.flag = true;
this.spinChangeImg();
}
}
else
{
this.spinSetVar(now + rate);
this.spinSetPos(rate/2);
this.spinSetPos(pos - (rate/2));
if (this.spinGetVar() >= this.max)
{
this.flag = false;
}
}
}
this.spinRotateStart = function(name, rate, speed)
{
this.interval = setInterval(name + '.spinDoSpin(' + rate + ');', speed);
this.running = true;
}
this.spinRotateStop = function()
{
clearInterval(this.interval);
this.running = false;
}
}
</script>
</head>
<body onLoad="sp = new spin(0, 'pic', '1.jpg', '2.jpg');">
<img style="position:absolute; top:50px; left:10px;" width="160" height="160" src="cool.gif" id="pic" />
<input id="start" type="button" value="Toggle" onClick="if (!sp.running) sp.spinRotateStart('sp', 1, 10); else sp.spinRotateStop();" />
</body>
</html>