Вход

Просмотр полной версии : Всплывающий блок

Zub
22.12.2011, 16:50
Добрый день.
Пытаюсь сделать всплывающий блок с информацией на JS+CSS.
Хочется одновременное изменение масштаба и прозрачности.
Нашёл пример как с поможью JS реализуется изменение прозрачности, а вот про масштаб-пока никак. Возможно ли менять? крайне желательно без всяких жквырей.
Поиском пока ничего подходящего не нашлось:(
nerv_
22.12.2011, 22:11
\примерно так
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body { margin: 15px; }
div { background-color:green; height:50px; width:50px; }
</style>
<script type="text/javascript">
var l;
(function() {
var h, w, t;
l = function(b) {
var x = document.getElementsByTagName("div")[0];
var j = x.currentStyle || window.getComputedStyle(x, null);
h = j.height.replace(/\D/g,"") - 0;
w = j.width.replace(/\D/g,"") - 0;
clearTimeout(t);
if(b) {
if(h < 100) {
x.style.height = (h += 2) + "px";
x.style.width = (w += 4) + "px";
t = setTimeout(function() {l(true)}, 50);
}
}
else {
if(h > 50) {
x.style.height = (h -= 2) + "px";
x.style.width = (w -= 4) + "px";
t = setTimeout(function() {l(false)}, 50);
}
}
}
})();
</script>
</head>
<body>
<div onmouseover="l(true);" onmouseout="l(false);"></div>
</body>
</html>
Zub
23.12.2011, 15:56
nerv_,
спасибо огромное! буду пытаться сращивать:)