Форум

bayah · #1 (**permalink**) 06.05.2010, 20:56

Требуется чтобы при наведении на элемент 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>

Gvozd · #2 (**permalink**) 06.05.2010, 22:18

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

bayah · #3 (**permalink**) 07.05.2010, 07:38

<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>

micscr · #4 (**permalink**) 07.05.2010, 08:54

Так раскомментируй себе:
//alert('OUT')
и увидишь как беспорядочно вызываются обработчики. Все потому что события родителя mouseover mouseout срабатывают и на детях.

bayah · #5 (**permalink**) 07.05.2010, 09:08

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>

Форум

Справочник

Discord чат

Курсы javascript