Убегающий слой
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
var colors = ["0078ff","f5f5f5","dce5f8","00ec9d","c3c3c3","ff0000"], marginData = [5,5,5,5];
function getRandom(min,max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
function getRootElement(doc)
{
doc = doc || document;
return doc.compatMode == 'CSS1Compat' ? doc.documentElement : doc.body;
}
function getViewportSize(doc)
{
doc = doc || document;
var elem = getRootElement(doc);
return [elem.clientWidth, elem.clientHeight];
}
var maxWidth = getViewportSize()[0], maxHeight = getViewportSize()[1];
function superfunction(obj)
{
var randomWay = getRandom(1,4), marginOffset = getRandom(5,30), newColor = getRandom(0,colors.length - 1);
obj.innerHTML = "<br><br><br>OLeft: " + obj.offsetLeft + "<br>OTop: " + obj.offsetTop;
if(obj.offsetLeft > (maxWidth - obj.style.width) || obj.offsetTop > (maxHeight - obj.style.height) )
{
if(obj.offsetLeft > (maxWidth - obj.style.width))
{
obj.style.marginLeft = maxWidth - obj.style.width - marginOffset + "px";
marginData[randomWay] = maxWidth - obj.style.width - marginOffset;
}
if(obj.offsetTop > (maxHeight - obj.style.height))
{
obj.style.marginTop = maxHeight - obj.style.height - marginOffset + "px";
marginData[randomWay] = maxHeight - obj.style.height - marginOffset;
}
}
else
{
switch(randomWay)
{
case 1: obj.style.marginLeft = marginData[randomWay] + marginOffset + "px";
case 2: obj.style.marginRight = marginData[randomWay] + marginOffset + "px";
case 3: obj.style.marginTop = marginData[randomWay] + marginOffset + "px";
case 4: obj.style.marginBottom = marginData[randomWay] + marginOffset + "px";
default: void(0);
}
marginData[randomWay] += marginOffset;
}
obj.style.background = "#" + colors[newColor];
}
</script>
</head>
<body onload="javascript:void(0);">
<div onmousemove="superfunction(this)" onmouseout="superfunction(this)" style="background-color:#f5f5f5; border: 1px solid black; width:150px; height:150px;">Pura Vida</div>
Теги:
style,
marginOffset,
randomWay,
marginData,
height,
maxWidth,
width,
maxHeight,
getRandom,
function,
offsetTop,
getViewportSize,
offsetLeft,
return,
superfunction,
colors,
marginLeft,
newColor,
marginTop,
background,
150px,
f5f5f5,
script,
getRootElement,
document,
default,
marginBottom,
switch,
else,
onload,
marginRight,
javascript,
solid,
black,
random
Комментарии:
Нету комментариев для вывода...