Помогите со скриптом.
Требуется чтобы при наведении на элемент div курсора буквы складывались и расходились снова при выходе курсора за div.
Вот пока только складываются. Не могу понять что происходит потом. <html> <head> <style type='text/css'> .header{ font-size:24px; text-align:center; } .container{ background-color:#993300; width: 100% } </style> <script src='/opacity.js' type='text/javascript'></script> <script type='text/javascript'> var count = 100 var m_in var id_in var id_out function movein(){ if(count > 2){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) - 2) + '%' count -=2 if(m_in = 0){ clearInterval(id_in) } } else{ clearInterval(id_in) } } function moveout(){ if(count < 100){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) + 2) + '%' count +=2 if(m_in = 1){ clearInterval(id_out) } } else{ clearInterval(id_out) } } function movei(){ //alert('IN') m_in=1 id_in = setInterval(movein, 5) } function moveo(){ //alert('OUT') m_in=0 id_out = setInterval(moveout, 5) } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div align="center" class='container' onMouseOver='movei()' onMouseOut='moveo()'> <table id='header' class='header' width="100%" height="10%" bgcolor='#993300'> <tr> <td>A</td> <td>L</td> <td>A</td> <td>N</td> <td>D</td> </tr> </table> </div> </div> </body> </html> |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
<html> <head> <style type='text/css'> .header{ font-size:24px; text-align:center; } .container{ background-color:#993300; width: 100% } </style> <script src='/opacity.js' type='text/javascript'></script> <script type='text/javascript'> var count = 100 var m_in var id_in var id_out function movein(){ if(count > 2){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) - 2) + '%' count -=2 if(m_in = 0){ clearInterval(id_in) } } else{ clearInterval(id_in) } } function moveout(){ if(count < 100){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) + 2) + '%' count +=2 if(m_in = 1){ clearInterval(id_out) } } else{ clearInterval(id_out) } } function movei(){ //alert('IN') m_in=1 id_in = setInterval(movein, 5) } function moveo(){ //alert('OUT') m_in=0 id_out = setInterval(moveout, 5) } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div align="center" class='container' onMouseOver='movei()' onMouseOut='moveo()'> <table id='header' class='header' width="100%" height="10%" bgcolor='#993300'> <tr> <td>A</td> <td>L</td> <td>A</td> <td>N</td> <td>D</td> </tr> </table> </div> </div> </body> </html> |
Так раскомментируй себе:
//alert('OUT') и увидишь как беспорядочно вызываются обработчики. Все потому что события родителя mouseover mouseout срабатывают и на детях. |
micscr, то есть события вызываются неоднократно при наведении на div?
Еще вызываются событие для table, для td что ли? Ну...в любом случае я переделал немного по иному(кстати в этом случае события так же должны вызываться беспорядочно как вы говорите), и работает. Заменил setInterval и clearIterval(там я че-то намудрил, что не совсем очевидно как они выполняются) на setTimeout и положил его в саму функцию. Не знаю, может тут конечно тоже коряво понаписал? Код: <html> <head> <style type='text/css'> .header{ font-size:24px; text-align:center; } .container{ background-color:#993300; width: 100% } </style> <script src='/opacity.js' type='text/javascript'></script> <script type='text/javascript'> var count = 100 var m_in = 0 function movein(){ if(count > 2 && m_in == 0){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) - 2) + '%' count -=2 setTimeout(movein, 5) } } function moveout(){ if(count < 100 && m_in == 1){ document.getElementById('header').width = (parseInt(document.getElementById('header').width) + 2) + '%' count +=2 setTimeout(moveout, 5) } } function movei(){ m_in=0 movein() } function moveo(){ m_in=1 moveout() } </script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> </head> <body> <div align="center" class='container' onMouseOver='movei()' onMouseOut='moveo()'> <table id='header' class='header' width="100%" height="10%" bgcolor='#993300'> <tr> <td>A</td> <td>L</td> <td>A</td> <td>N</td> <td>D</td> </tr> </table> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 22:45. |