0
私は質問があります。 JQueryの助けを借りずに自分のデザインのフェーディングメニューシステムを試しています。私の問題はもちろん、ポインタがすぐにメニューを生成する要素（私の場合はUL）に入ることができない完璧な世界では、フェードインまたはフェードアウトするメニューを得ることができます。しかし、カーソルがすぐにULに入り、すぐに出ると、当然私はちらつきの影響を受けます。私は自分自身のデザインの素晴らしいオーバーアーシングイベントハンドラの必要性を想像しています。私はおそらく私はそれをスクラップしてやり直すつもりですので、私はそれが必要になるとは思わないが、私は自分のコードを掲載します。誰もがリンク/アイデア/これで始める良い方向を持っていますか？JQueryを使わないフェードメニュー
javascriptのコード：
window.onload = InitPage;
function InitPage(){
function fadeEffect(child, opacity, direction, e){
if(direction && opacity != 1){
opacity = opacity < 1?Math.round((opacity + 0.05)*100)/100:1;
child.style.opacity = opacity;
setTimeout(function(){fadeEffect(child, opacity, direction,e)},50);
}else if(!direction && opacity != 0){
opacity = opacity > 0?Math.round((opacity - 0.05)*100)/100:0;
child.style.opacity = opacity;
child.style.display = opacity == 0?"none":"block";
setTimeout(function(){fadeEffect(child, opacity, direction,e)},50);
}
}
function hoverMenu(e, oTarget){
var isChildOf = function(pNode, cNode){
if(pNode === cNode){
return true;
}
while (cNode && cNode !== pNode){
cNode = cNode.parentNode;
}
return cNode === pNode;
}
var hasChildMenu = function(pNode, cNode){
while(cNode && cNode !== pNode){
if(cNode.className == "ul_menu" || cNode.className == "li_menu"){
cNode.style.display = "block";
//cNode.style.opacity = 1;
fadeEffect(cNode,0,true,e);
//cNode.timer = setInterval(function(arg1,arg2,arg3){return function(){fadeEffect(arg1,arg2,arg3)}}(cNode,opacity,true),50);
}
cNode = cNode.previousSibling;
}
if(e.type == "mouseout"){
e.cancelBubble();
}
}
var target = e.target;
if(!oTarget){
oTarget = target;
}
var relTarg = e.fromElement;
if(isChildOf(oTarget, relTarg) == false){
//alert("mouse enters");
hasChildMenu(oTarget, oTarget.lastChild);
}
}
function unhoverMenu(e, oTarget){
var isChildOf = function(pNode, cNode){
//check to see if element is a child
if(pNode === cNode){
return true;
}
while (cNode && cNode !== pNode){
cNode = cNode.parentNode;
}
return cNode === pNode;
}
var hasChildMenu = function(pNode, cNode){
while(cNode && cNode !== pNode){
if(cNode.className == "ul_menu" || cNode.className == "li_menu"){
//cNode.style.opacity = 0;
//cNode.style.display = "none";
fadeEffect(cNode,1,false,e);
}
cNode = cNode.previousSibling;
}
if(e.type == "mouseover"){
e.cancelBubble();
}
}
var target = e.target;
if(!oTarget){
oTarget = target;
}
var relTarg = e.toElement;
if(isChildOf(oTarget, relTarg) == false){
hasChildMenu(oTarget, oTarget.lastChild);
}
function MenuEventHandler (e, oTarget){
}
}
var ul_menu = document.getElementById("ul_grabbed");
ul_menu.addEventListener("mouseover", function(e1){return function(e){hoverMenu(e, e1)}}(ul_menu),false);
ul_menu.addEventListener("mouseout", function(e1){return function(e){unhoverMenu(e, e1)}}(ul_menu),false);
//document.addEventListener("mouseover", hoverMenu,false);
//document.addEventListener("mouseout",unhoverMenu,false);
}
HTMLコード：
<html>
<head>
<script type="text/javascript" src="bubble.js"></script>
<link rel="stylesheet" href="bubble_style.css" type="text/css" media="screen" />
</head>
<body>
<div id="background">
<div id="menu_section">
<ul id="ul_grabbed" class="ul_menu">Menu 1
<li class="li_menu">item 1</li>
<li class="li_menu">item 2</li>
<li class="li_menu">item 3</li>
<li class="li_menu">item 4</li>
</ul>
<ul class="ul_menu">
Menu 2
</ul>
</div>
</div>
</body>
</html>
CSSコード：実際のプロジェクト、jQueryのせずにこれを行う（またはいくつかの他のライブラリ）で
*{margin:0; padding:0}
body{margin:0; padding:0;background-color:black}
div#background{
margin: 0 auto 0 auto;
display:block;
width:800px;
height:100%;
vertical-align:middle;
background-color: green;}
div#menu_section{
margin:auto;
width:800px;
height:40px;
background-color:purple;}
div#monkey{
width:400px;
height:400px;
background-color:red;}
ul.ul_menu{
list-style:none;
display:block;
height:40px;
width:400px;
float:left;
text-align:center;
color:white;
}
li.li_menu{
height:20px;
display:none;
position:relative;
text-align:center;
color:white;
background-color:black;
opacity:0;}
このような例は、[JSFiddle]（http://jsfiddle.net/）を作成する必要があり、私たちは見ることができます。 – josh3736
ステップ1はjQueryを見ることです。内部的な畳み込みによって完全に混乱することはありません。ステップ2は最初の原則に戻り、良い技術的アドバイスを得るフォーラムで尋ねる（comp.lang.javascriptはそれに適しています）。ステップ3はそれを維持することです。あなたは[MyLibrary]（http://www.cinsoft.net/mylib.html）を見るよりも悪くなる可能性があります。 – RobG