Скрипт не полностью работает в IE, однако в Опере, FireFox, Chrome все хорошо
имеется div: <div id="message" class="" style="opacity: 0; filter: alpha(opacity=0);"></div>
и скрипт:
var hT, sT, dT; //таймеры
function SmoothShow(objId, x)
{
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100; //определяем значение прозрачности
if(op < x) //если значение прозрачности меньше 1 то:
{
clearTimeout(hT);
op += 0.05; //переменная хранящая значение прозрачности которое сейчас будем устанавливать
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
sT=setTimeout('SmoothShow(\''+objId+'\', '+x+')',50); //данная функция запускается с задержкой 50 мс, пока прозрачность не будет равна 1
}
if (op==1) { //если прозрачность = 1, то после задержки в 3 секунды запускается функция которая по аналогичному принципу обеспечивает исчезание
clearTimeout(dT);
dT=setTimeout("SmoothHide('message', 0)", 3000);
}
}
function SmoothHide(objId, x)
{
var obj = document.getElementById(objId);
op = (obj.style.opacity)?parseFloat(obj.style.opacity):parseInt(obj.style.filter)/100;
if(op > x)
{
clearTimeout(sT);
op -= 0.05;
obj.style.opacity = op;
obj.style.filter='alpha(opacity='+op*100+')';
hT=setTimeout('SmoothHide(\''+objId+'\', '+x+')',25);
}
if (op==x) {
document.getElementById("message").style.display = "none";
}
}
Скрипт должен обеспечивать плавное появление и плавное исчезание, в нормальных браузерах все работает, прям никаких нареканий, а вот IE не хочет, доходит только до середины скрипта, сообщение плавно появляется и на этом все. Функция появления вызывается из другой функции, но я думаю не совсем важно из какой, если в остальных браузерах работает:) P.S. еще раз хочу обратить внимание на то, что в остальных браузерах работает!!! |
if (op==1) замени на if (op>=1) и if (op==x) на if (op<=x) смотри тут почему так
|
Огромное спасибо, помогло:)
|
Здравствуйте, У меня есть задача сделать выпадающее меню с использованием яваскрипта, но есть одна загвоздка - я им не владею вобще, поэтому я взял готовое меню (простенькое) и сляпал под себя, но оно не работает в IE. Объясню суть: у меня монитор 17" и когда я навожу мышью на таблицу, которая появляется при наведении на кнопку, то она уезжает, ну вобщем невозможно курсором "путешествовать" по таблице. Помогите, пожалуйста, что я сделал не так? Незнаю как вложить файл, но вот код
<html>
<head>
<title>Новое Меню на сайт</title>
<style>
.poisk {
width: 156px;
height: 16px;
border: 0px solid red;
}
</style>
<LINK href="menu/layout.css" rel=stylesheet>
</head>
<body leftmargin="0" topmargin="0"><table><tr><td width="1000" height="470" align="center">Здесь еще одна таблица</td></tr></table>
<style>
A {color:black; text-decoration: none}
A:hover {color:black; text-decoration: none}
</style>
<style type="text/css">
body {
font-family: Arial;
}
.tab {
cursor: pointer;
}
.show {
display: none;
position: relative;
width: 1000px;
height: 100px;
top: -3px;
left: px;
color: red;
font-size: 18px;
font-weight: bold;
}
.show1 {
display: none;
position: relative;
top: -3px;
left: 250px;
width: 1000px;
height: 100px;
color: red;
font-size: 18px;
font-weight: bold;
}
</style>
<script type="text/javascript">
function show_div ( id ) {
var divs = document.getElementsByTagName('div');
for ( var i = 0; i < divs.length; i ++ ) {
var div = divs.item(i);
if ( /show/.test( div.className ) ) {
if ( div.id == id ) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
}
}
function hide_div ( id ) {
var divs = document.getElementsByTagName('div');
for ( var i = 0; i < divs.length; i ++ ) {
var div = divs.item(i);
if ( /show/.test( div.className ) ) {
if ( div.id == id ) {
div.style.display = 'none';
} else {
div.style.display = 'none';
}
}
}
}
function hide_div1 ( id ) {
var divs = document.getElementsByTagName('div');
for ( var i = 0; i < divs.length; i ++ ) {
var div = divs.item(i);
if ( /show/.test( div.className ) ) {
if ( div.id == id ) {
div.style.display = 'none';
} else {
div.style.display = 'none';
}
}
}
}
</script>
<div><center><tr><td><table valign="top" cellspacing="0" cellpadding="0"><tr><td><span class="tab" onmouseover="show_div('one')" onmouseout="hide_div1('one')"><img src="prod.jpg" border="0"></span><a href="http://www.arsenal-npo.ru/price/"><img src="price.jpg" border="0"><span class="tab" onmouseover="show_div('three')" onmouseout="hide_div1('three')"><img src="doc.jpg" border="0"></span><span class="tab" onmouseover="show_div('three')" onmouseout="hide_div1('three')"><img src="po.jpg" border="0"></span><a href="http://www.arsenal-npo.ru/video/"><img src="video.jpg" border="0"></a><a href=""><img src="im.jpg" border="0"></a><a href=""><img src="proekts.jpg" border="0"></a><a href=""><img src="kontr_proizv.jpg" border="0"></a></td></tr></table></td></tr></table></center></div>
<center><div class="show" id="one" onmouseover="show_div('one')" onmouseout="hide_div1('one')">
<TABLE WIDTH="974" BORDER=2 bordercolor="004fd0" CELLSPACING=0 CELLPADDING=0>
<TR>
<td ALIGN="center" bgcolor="ee9a85"><font size="1" face="verdana"><b><a href=""> </a></b></td>
<TD ALIGN="center" bgcolor="f7c6b7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><B> <b></TD>
<TD ALIGN="center" bgcolor="fae1b9"><font size="1" face="verdana"><B> </b></TD>
<TD ALIGN="center" bgcolor="fae1b9"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f7c592"><font size="1" face="verdana"><b> </B></TD>
<TD ALIGN="center" bgcolor="ef9968"><font size="1" face="verdana"><b> </b></TD>
</TR>
<TR>
<TD ALIGN="center"><a href="input_page/iz.php"><img src="vyp_menu_10.jpg" border="0"></a></TD>
<TD ALIGN="center"><img src="vyp_menu_11.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_12.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_13.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_14.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_15.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_16.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_17.jpg" border="0"></TD>
<TD ALIGN="center"><img src="vyp_menu_18.jpg" border="0"></TD>
</TR>
<TR>
<TD ALIGN="center" bgcolor="ee9a85"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f7c6b7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f4e7d7"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="fae1b9"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="fae1b9"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f7c592"><font size="1" face="verdana"><b> </b></TD>
<TD ALIGN="center" bgcolor="f7c592"><font size="1" face="verdana"><b> </b></TD>
</TR>
<TR>
<TD ALIGN="center"><img src="vyp_menu_28.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_29.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_30.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_31.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_32.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_33.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_34.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_35.jpg"></TD>
<TD ALIGN="center"><img src="vyp_menu_36.jpg"></TD>
</TR>
</TABLE></font></center>
</div>
<div class="show1" id="two"></div>
<div class="show1" id="three" onmouseover="show_div('three')" onmouseout="hide_div1('three')">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="po.jpg"></td>
</tr>
<tr>
<td><img src="doc.jpg"></td>
</tr>
</div>
</body>
</html>
|
Боюсь спросить где такое раздают ?;)
|
| Часовой пояс GMT +3, время: 10:22. |