Как сделать постепенное увеличение opacity.
Вот html код
<html>
<body>
<script>
function showsl (n)
{ var el=document.all["l"].style
if (n==1)
el.opacity=0
else
el.opacity=0.8
}
</script>
<form name="form1">
<input type="button" value=Показать onmouseover="showsl(2)" onmouseout='showsl(1)'>
</form>
<div id='l' style='opacity:0'>Некий текст</div>
</body>
</html>
Помогите пожалуйста, как сделать так, чтобы div проявлялся постепенно? Заранее благодарен |
JSN,
Вот в сообщении 5 есть пример http://javascript.ru/forum/dom-windo...tml#post202558 можно сделать на jQuery http://hostjs-mybb2011.narod.ru/sliderLight.htm Есть Вариант чисто через css http://qps.ru/mJXh4 |
<input id="but" type="button" value="Показать">
<div id='div' style="width: 100%; opacity: 0; filter: alpha(opacity=0)">Скрывается или исчезает</div>
<script>
window.onload = function () {
var but = document.getElementById('but');
var div = document.getElementById('div');
var int;
but.onmouseover = function () {
clearInterval(int);
var n = 0;
int = setInterval(function () {
if (n >= 1) {
n = 1;
clearInterval(int);
}
n = n + 0.1;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 100*n + ')';
}, 100);
}
but.onmouseout = function () {
clearInterval(int);
var n = 1;
int = setInterval(function () {
if (n <= 0) {
n = 0;
clearInterval(int);
}
n = n - 0.1;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 100*n + ')';
}, 100);
}
}
</script>
не понял только почему в IE для div-a не срабатывает параметр filter, хотя для кнопки срабатывает
<input id="but" type="button" value="Показать" style="opacity: 0; filter: alpha(opacity=0)">
<div id='div'>Скрывается или исчезает</div>
<script>
window.onload = function () {
var div= document.getElementById('but');
var but= document.getElementById('div');
var int;
but.onmouseover = function () {
clearInterval(int);
var n = 0;
int = setInterval(function () {
if (n >= 1) {
n = 1;
clearInterval(int);
}
n = n + 0.1;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 100*n + ')';
}, 100);
}
but.onmouseout = function () {
clearInterval(int);
var n = 1;
int = setInterval(function () {
if (n <= 0) {
n = 0;
clearInterval(int);
}
n = n - 0.1;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 100*n + ')';
}, 100);
}
}
</script>
|
Спасибо огромное!
|
Цитата:
|
поправил, добавив width
какая коварная штука оказывается ещё есть, melky, спасибо |
Цитата:
|
<div id="but" style='position:absolute; top:60; left:90;'>Кнопка - картинка</div>
<div id='div' style="opacity: 0; filter: alpha(opacity=0);
position:absolute; top:100; left:100; z-index:100">Текст - Картинка</div>
<script>
window.onload = function () {
var but = document.getElementById('but');
var div = document.getElementById('div');
var int;
but.onmouseover = function () {
clearInterval(int);
var n = 0;
int = setInterval(function () {
if (n >= 0.8) {
n = 0.8;
clearInterval(int);
}
n = n + 0.001;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 80*n + ')';
}, 0.01);
}
but.onmouseout = function () {
clearInterval(int);
var n = div.style.opacity;
int = setInterval(function () {
if (n <= 0) {
n = div.style.opacity;
clearInterval(int);
}
n = n - 0.001;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 80*n + ')';
}, 0.01);
if (div.style.opacity > 0.3) {div.onmouseover = function () {clearInterval
(int);
var n = 0.4;
int = setInterval(function () {
if (n >= 0.8) {
n = 0.8;
clearInterval(int);
}
n = n + 0.001;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 80*n + ')';
}, 0.01);}
div.onmouseout = function () {clearInterval(int);
var n = div.style.opacity;
int = setInterval(function () {
if (n <= 0) {
n = div.style.opacity;
clearInterval(int);
}
n = n - 0.001;
div.style.opacity = n;
div.style.filter = 'alpha(opacity=' + 80*n + ')';
}, 0.01);}}
}
}
</script>
я немного изменил код, в связи с нужными функциями, но есть проблема, после того, как div появился один раз, при наведении на него он снова появляется, даже если div.style.opacity<0.3 Я догадываюсь в чем ошибка, но не не знаю как исправить. Заранее спасибо за помощь. |
в чём смысл сей затеи, какой эффект должен получиться на выходе?
|
Проблема решалась, с помощью display, я просто все усложнил.
Теперь возник другой вопрос: Во-первых, допустим что у нас есть два массива array1 и array2, можно ли задать его элементам следующие значения: array1[1] = document.getElementBy..., например. Во-вторых, если это возможно, то как сделать так, что бы при допустим наведении на элемент номер i массива array1, происходило нечто с элементом по номером i массива array2 (или i +1; или j; и т.д.)? заранее спасибо |
Проблема решалась, с помощью display, я просто все усложнил.
Теперь возник другой вопрос: Во-первых, допустим что у нас есть два массива array1 и array2, можно ли задать его элементам следующие значения: array1[1] = document.getElementBy..., например. Во-вторых, если это возможно, то как сделать так, что бы при допустим наведении на элемент номер i массива array1, происходило нечто с элементом по номером i массива array2 (или i +1; или j; и т.д.)? заранее спасибо |
1 да
2 всё также,через стили |
Такой возникает ещё вопрос: а как это правильно реализовать?
Пробовал, сделать так, знаю что не правильно, но не представляю как(я только учусь):
window.onload = function () {
var arr = [];
var arr[1] = document.getElementById('a');
var arr[2] = document.getElementById('b');
var i;
arr[i].onmouseover = function() {
arr[i].style.backgroundcolor="grey";
}
arr[i].onmouseout = function() {
arr[i].style.backgroundcolor="black";
}
}
Заранее спасибо |
| Часовой пояс GMT +3, время: 12:30. |