26.03.2013, 14:25
|
|
Интересующийся
|
|
Регистрация: 05.01.2013
Сообщений: 21
|
|
|
Проблемы с меню
Я сделал менюшку небольшую(не придирайтесь, я не очень-то программист, точнее вообще плохой), скажите в чем проблема, почему когда переходишь с зеленого дива на не рядом стоящий все запарывается:
|
Код:
|
<!DOCTYPE HTML>
<html>
<head></head>
<style>
.menu {
background:rgb(200, 0, 0);
width:200px;
height:40px;
color:white;
float:left;
text-align:center;
text-decoration:none;
}
.menulink {
display:none;
width:100%;
background:lightgreen;
position:fixed;
top:50px;
opacity:0;
height:0px;
}
#menudiv {
background:rgb(200, 0, 0);
position:fixed;
width:1280px;
}
</style>
<body>
<div id='menudiv'>
<div class='menu' onMouseOver='b(this,0)' onMouseOut='a(this,0)'>Раздел 1</div>
<div class='menu' onMouseOver='b(this,1)' onMouseOut='a(this,1)'>Раздел 2</div>
<div class='menu' onMouseOver='b(this,2)' onMouseOut='a(this,2)'>Раздел 3</div>
<div class='menu' onMouseOver='b(this,3)' onMouseOut='a(this,3)'>Раздел 4</div>
<div class='menu' onMouseOver='b(this,4)' onMouseOut='a(this,4)'>Раздел 5</div>
<div class='menu' onMouseOver='b(this,5)' onMouseOut='a(this,5)'>Раздел 6</div>
</div>
<div class='menulink' id='a0' onMouseOut='disapp(0,0.05)'>hfhfg1</div>
<div class='menulink' id='a1' onMouseOut='disapp(1,0.05)'>hfhfg2</div>
<div class='menulink' id='a2' onMouseOut='disapp(2,0.05)'>hfhfg3</div>
<div class='menulink' id='a3' onMouseOut='disapp(3,0.05)'>hfhfg4</div>
<div class='menulink' id='a4' onMouseOut='disapp(4,0.05)'>hfhfg5</div>
<div class='menulink' id='a5' onMouseOut='disapp(5,0.05)'>hfhfg6</div>
<script>
var d = [],
c = [],
k = [],
h = [],
l = [],
t = [],
p = [],
z = [];
for (var j = 0; j <= 6; j++) {
h[j] = 100;
z[j] = 0;
k[j] = document.getElementById('a' + j);
}
function a(el, i) {
clearInterval(c[i]);
d[i] = setInterval(function () {
if (h[i] <= 200) {
h[i] += 2;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(d[i]);
}
}, 10);
}
function b(el, i) {
clearInterval(d[i]);
c[i] = setInterval(function () {
if (h[i] >= 100) {
h[i] -= 5;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(c[i]);
}
}, 10);
app(i);
for(var r=0;r<=5;r++){
if (r!=i){
disapp(r,1);
}
}
}
function app(x) {
k[x].style.display = 'block'
clearInterval(t[x]);
p[x] = setInterval(function () {
if (z[x] <= 1) {
z[x] += 0.03;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(p[x]);
}
}, 10);
}
function disapp(x,o) {
clearInterval(p[x]);
t[x] = setInterval(function () {
if (z[x] > 0) {
z[x] -= o;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(t[x]);
}
}, 10);
if (z[x] <= 0) {
k[x].style.display = 'none';
}
}
</script>
</body>
</html>
|
Заранее благодарен.
|
|
26.03.2013, 15:52
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
|
Сообщение от qwertyuiopoiuytrewq
|
|
когда переходишь с зеленого дива на не рядом стоящий все запарывается
|
Переведи. (с)
Что есть "не рядом стоящий"? И как понять "все запарывается"? |
|
26.03.2013, 15:54
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Так хоть отступы на местах...
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.menu {
background:rgb(200, 0, 0);
width:200px;
height:40px;
color:white;
float:left;
text-align:center;
text-decoration:none;
}
.menulink {
display:none;
width:100%;
background:lightgreen;
position:fixed;
top:50px;
opacity:0;
height:0px;
}
#menudiv {
background:rgb(200, 0, 0);
position:fixed;
width:1280px;
}
</style>
<script type="text/javascript">
function a(el, i) {
clearInterval(c[i]);
d[i] = setInterval(function () {
if (h[i] <= 200) {
h[i] += 2;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(d[i]);
}
}, 10);
}
function b(el, i) {
clearInterval(d[i]);
c[i] = setInterval(function () {
if (h[i] >= 100) {
h[i] -= 5;
el.style.background = 'rgb(' + h[i] + ',0,0)';
} else {
clearInterval(c[i]);
}
}, 10);
app(i);
for(var r=0;r<=5;r++){
if (r!=i) {
disapp(r,1);
}
}
}
function app(x) {
k[x].style.display = 'block'
clearInterval(t[x]);
p[x] = setInterval(function () {
if (z[x] <= 1) {
z[x] += 0.03;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(p[x]);
}
}, 10);
}
function disapp(x,o) {
clearInterval(p[x]);
t[x] = setInterval(function () {
if (z[x] > 0) {
z[x] -= o;
k[x].style.opacity = z[x];
k[x].style.height = z[x]*200+'px';
} else {
clearInterval(t[x]);
}
}, 10);
if (z[x] <= 0) {
k[x].style.display = 'none';
}
}
</script>
</head>
<body>
<div id='menudiv'>
<div class='menu' onMouseOver='b(this,0)' onMouseOut='a(this,0)'>Раздел 1</div>
<div class='menu' onMouseOver='b(this,1)' onMouseOut='a(this,1)'>Раздел 2</div>
<div class='menu' onMouseOver='b(this,2)' onMouseOut='a(this,2)'>Раздел 3</div>
<div class='menu' onMouseOver='b(this,3)' onMouseOut='a(this,3)'>Раздел 4</div>
<div class='menu' onMouseOver='b(this,4)' onMouseOut='a(this,4)'>Раздел 5</div>
<div class='menu' onMouseOver='b(this,5)' onMouseOut='a(this,5)'>Раздел 6</div>
</div>
<div class='menulink' id='a0' onMouseOut='disapp(0,0.05)'>hfhfg1</div>
<div class='menulink' id='a1' onMouseOut='disapp(1,0.05)'>hfhfg2</div>
<div class='menulink' id='a2' onMouseOut='disapp(2,0.05)'>hfhfg3</div>
<div class='menulink' id='a3' onMouseOut='disapp(3,0.05)'>hfhfg4</div>
<div class='menulink' id='a4' onMouseOut='disapp(4,0.05)'>hfhfg5</div>
<div class='menulink' id='a5' onMouseOut='disapp(5,0.05)'>hfhfg6</div>
<script>
var d = [],
c = [],
k = [],
h = [],
l = [],
t = [],
p = [],
z = [];
for (var j = 0; j <= 6; j++) {
h[j] = 100;
z[j] = 0;
k[j] = document.getElementById('a' + j);
}
</script>
</body>
</html>
|
|
26.03.2013, 23:41
|
|
Интересующийся
|
|
Регистрация: 05.01.2013
Сообщений: 21
|
|
|
Перевожу когда мы делаем onmouseover на Раздел, затем на выпавшее меню, а затем снова на раздел(любой), как я понимаю запускается disapp одновременно с onmouseout menulink и onmouseover раздела, хотя не очень понимаю как одно другому мешает, разве что z[x] становится вне разумных пределов, но и её возвращение к адеквату тоже не дает результата.
|
|
27.03.2013, 08:32
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
qwertyuiopoiuytrewq, а что хочешь получить в итоге?  Т.е. какое именно меню хотел сделать? Как оно должно работать в твоём понимании?
|
|
27.03.2013, 10:55
|
|
Интересующийся
|
|
Регистрация: 05.01.2013
Сообщений: 21
|
|
|
изначально я просто баловался с интервалами, потом с ргб, а потом решил сделать меню. я хотел сделать так, что бы при наведении на какой-то раздел появлялся див соответствующего раздела, с всевозможной информацией, в данном случае пока что пара букв, а когда убираешь мышь все чудо должно исчезать, а поскольку неизвестны действия пользователя, то нужно чтобы он пропадал не только когда непосредственно с выпавшего блока, убиралась мышь но и если переводят на другой раздел,не важно какой, другими словами, что бы работал по-людски. в принципе все работает так как надо, с одной поправкой, глючит при переходе с одного раздела на другой, через выпавший блок, исправить не получилось
|
|
27.03.2013, 13:16
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
qwertyuiopoiuytrewq, все, что ты описал, давно придумали за тебя...
То, что ты наваял - чистый говнокод.
|
|
27.03.2013, 22:40
|
|
Интересующийся
|
|
Регистрация: 05.01.2013
Сообщений: 21
|
|
|
Оу, да я застрял во времени, все это можно было в две строки записать.
Но зато вроде с интервалами теперь все более-менее понятно.
Спасибо
|
|
|
|
