Всплывающий блок
Добрый день.
Пытаюсь сделать всплывающий блок с информацией на JS+CSS. Хочется одновременное изменение масштаба и прозрачности. Нашёл пример как с поможью JS реализуется изменение прозрачности, а вот про масштаб-пока никак. Возможно ли менять? крайне желательно без всяких жквырей. Поиском пока ничего подходящего не нашлось:( |
\примерно так
<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>
|
nerv_,
спасибо огромное! буду пытаться сращивать:) |
| Часовой пояс GMT +3, время: 05:56. |