<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="author" content="Nikos Efthias"/>
<link rel="stylesheet" type="text/css" href="css/a.css"/>
<script src="js/lib/all.js"></script>
<head>
</head>
<body>
<div id="holder">
<img src="images/log.png" id="logo"/>
<ul id="mainMenu">
<li value="1"></li>
<li value="2"></li>
<li value="3"></li>
<li value="4"></li>
<li value="5"></li>
<li value="6"></li>
</ul></div>
<script>
function overOutDown(){
//main
var p=/ mover/;
var li =document.getElementsByTagName('li');
for (var i=0;i<li.length;i++)
{
//for
li[i].addEventListener("mousedown",function(){this.className+=" mdown";});
li[i].addEventListener("mouseup",function(){this.className=this.className.replace(" mdown","")});
//forend
}
window.addEventListener("click",function(event){
event=event||window.event;
if(event.target.nodeName=="LI"){
//ifstart
var marg=0;
var width=300;
var inter=setInterval(function(){
marg-=10;
width+=5;
event.target.style.width=width+"px";
event.target.style.marginLeft=marg+"px";
if(width==350)clearInterval(inter);
},100);
//ifend
}
});
//mainend
}
overOutDown();
</script>
</body>
</html>
I have a problem with behavior of this program. When click instead of moving in one side it moves in strange way. all sibling li nodes are moving as well. I tried to synchronize the time but it looks impossible to fix this by playing with numbers. i want event triggered only target li to grow in size to the right nothing to change on right side. im sure there will be a simple logic solution but you know when you are lost in functions you cannot see simple details.
Aucun commentaire:
Enregistrer un commentaire