代码太乱不想看~~看了效果~我觉得是鼠标离开使菜单消失那个事件处理不大好~~不要鼠标一离开就消失,搞个定时消失,
如:window.tt=setTimeout("candan.hide()",1000)
而鼠标再回到上面则取消定时器~~如:clearTimeout(window.tt)
这样就不会闪了~~~
如:window.tt=setTimeout("candan.hide()",1000)
而鼠标再回到上面则取消定时器~~如:clearTimeout(window.tt)
这样就不会闪了~~~
<head>
<title>怎么让鼠标经过弹出菜单的链接时不闪烁</title>
<style type="text/css">
body {
margin:0px;
background-repeat: repeat;
}
body,td,th {
font-size: 9pt;
}a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000000;
}
div{ padding:0px; margin:0px;word-break:break-all;border-collapse: collapse;}
ul{list-style-type: none;display:inline; margin:0px; }
li{list-style-type: none;text-indent:1px;display:inline;margin:0px;}
img{ border:0px;}
.SortList4_Info_List_Div{ float:left; display:inline; width:915px;}
.SortList4_Sort1_Item_Div{ float:left;}
.SortList4_Sort1_Img_Div{ float:left; width:88px;}
#SortList4_Sort1_Item_4{ float:left; width:103px;}
.SortList4_Sort2_AllItem_class
{display:none;
background-color:#f2f2f2;
filter:alpha(opacity=10);
border-bottom:1px solid #999999;
}
.SortList4_Sort2_Titel_Div
{ width:88px;
height:25px;
line-height:25px;
vertical-align:middle;
border-top:1px solid #999999;
border-left:1px solid #999999;
border-right:1px solid #999999;
}
.SortList4_Sort2_Titel_Div ul li a{text-indent:15px;}
</style>
<script type="text/javascript" language="javascript">
var interval = false;//判断是否可以隐藏菜单
function showsort1(obj)
{
for(var i=1;i<obj.childNodes.length;i++)
{
interval = true;
obj.childNodes[i].style.display = "block";
obj.childNodes[i].style.position = "absolute";
obj.childNodes[i].style.top = (2+i*25)+"px";
obj.childNodes[i].style.left = (obj.offsetLeft)+"px";
var filter = obj.childNodes[i].filters.alpha.opacity;
showalpha(obj.childNodes[i],filter);
}
}function hidden(obj)
{
if(interval)
{
return;
}
for(var i=1;i<obj.childNodes.length;i++)
{
var filter = obj.childNodes[i].filters.alpha.opacity;
hiddenalpha(obj.childNodes[i],filter);
interval = false;
obj.childNodes[i].style.display = "none";
}
}
function hiddensort1(obj){
interval = false;
delay(hidden,1,this,[obj]);//延时执行隐藏菜单的功能,因为需要当鼠标滑到子菜单上时,是不需要隐藏菜单的
}function delay(fn,parm,scope,config)
{
var start = new Date();
var zero_interval = null;
var config = config || [];
var h = function(){
if(new Date()-start >=parm){
clearInterval(zero_interval);
fn.apply(scope,config);
}
}
zero_interval = setInterval(h,parm);
}
function showalpha(obj,b){
if(b <=100)
{
b=b+2
}
else
{
return
}
obj.filters.alpha.opacity=b;
setTimeout(function(){showalpha(obj,b)},5);
}
function hiddenalpha(obj,b){
if(b >5)
{
b=b-5
}
else
{
return
}
obj.filters.alpha.opacity=b;
setTimeout(function(){hiddenalpha(obj,b)},2);
}</script>
</head>
<body>
<table width="1004" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="915" valign="bottom" ><span id="SortList4" ShowTitle="False"><div class="SortList4_Info_List_Div" id="SortList4_Info_List_Div" style="height:;width:;">
<div id="SortList4_Sort1_Item_1" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_1" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=1" target="_parent" title="抢险救援"><img src="../image/Sort/2007111512212.gif" alt="抢险救援" /></a>
</div><div id="SortList4_Sort2_AllItem_id_1" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=1&Sort3=1" target="_parent" title="社会救援">社会救援</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_1" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_1" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=2&Sort3=1" target="_parent" title="灾难抢险">灾难抢险</a></li>
</ul>
</div>
</div> </div>
</div>
<div id="SortList4_Sort1_Item_3" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_3" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=1" target="_parent" title="消防文化"><img src="../image/Sort/200711151230.gif" alt="消防文化" /></a>
</div><div id="SortList4_Sort2_AllItem_id_3" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=1&Sort3=1" target="_parent" title="消防史话">消防史话</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_1" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_1" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=2&Sort3=1" target="_parent" title="消防摄影">消防摄影</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_2" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_2" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=3&Sort3=1" target="_parent" title="消防艺术品">消防艺术品</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="SortList4_Sort1_Item_9" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_9" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=10&Sort2=1" target="_parent" title="消防知识"><img src="../image/Sort/2007111512418.gif" alt="消防知识" /></a>
</div><div id="SortList4_Sort2_AllItem_id_9" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=10&Sort2=1&Sort3=1" target="_parent" title="灭火知识">灭火知识</a></li>
</ul>
</div>
</div><div id="SortList4_Sort3_AllItem_id0" class="SortList4_Sort3_AllItem_Class">
<div id="SortList4_Sort3_Item_0" class="SortList4_Sort3_Item_Div"> </div>
<div id="SortList4_Sort3_Item_1" class="SortList4_Sort3_Item_Div"> </div>
<div id="SortList4_Sort3_Item_2" class="SortList4_Sort3_Item_Div"> </div>
<div id="SortList4_Sort3_Item_3" class="SortList4_Sort3_Item_Div"> </div> </div> </div>
</div> </div>
</div></span></td>
</tr></table>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>多个弹出菜单时怎么控制子菜单的显示或隐藏</title>
<style type="text/css">
body {
margin:0px;
background-repeat: repeat;
}
body,td,th {
font-size: 9pt;
}a:link {
color: #000000;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #000000;
}
div{ padding:0px; margin:0px;word-break:break-all;border-collapse: collapse;}
ul{list-style-type: none;display:inline; margin:0px; }
li{list-style-type: none;text-indent:1px;display:inline;margin:0px;}
img{ border:0px;}
.SortList4_Info_List_Div{ float:left; display:inline; width:915px;}
.SortList4_Sort1_Item_Div{ float:left;}
.SortList4_Sort1_Img_Div{ float:left; width:88px;}
#SortList4_Sort1_Item_4{ float:left; width:103px;}
.SortList4_Sort2_AllItem_class
{display:none;
background-color:#f2f2f2;
filter:alpha(opacity=10);
border-bottom:1px solid #999999;
}
.SortList4_Sort2_Titel_Div
{ width:88px;
height:25px;
line-height:25px;
vertical-align:middle;
border-top:1px solid #999999;
border-left:1px solid #999999;
border-right:1px solid #999999;
}
.SortList4_Sort2_Titel_Div ul li a{text-indent:15px;}
</style>
<script type="text/javascript" language="javascript">
var interval = false;//判断是否可以隐藏菜单
function showsort1(obj)
{
for(var i=1;i<obj.childNodes.length;i++)
{
interval = true;
obj.childNodes[i].style.display = "block";
obj.childNodes[i].style.position = "absolute";
obj.childNodes[i].style.top = (2+i*25)+"px";
obj.childNodes[i].style.left = (obj.offsetLeft)+"px";
var filter = obj.childNodes[i].filters.alpha.opacity;
showalpha(obj.childNodes[i],filter);
}
}function hidden(obj)
{
if(interval)
{
return;
}
for(var i=1;i<obj.childNodes.length;i++)
{
var filter = obj.childNodes[i].filters.alpha.opacity;
hiddenalpha(obj.childNodes[i],filter);
interval = false;
obj.childNodes[i].style.display = "none";
}
}
function hiddensort1(obj){
interval = false;
delay(hidden,1,this,[obj]);//延时执行隐藏菜单的功能,因为需要当鼠标滑到子菜单上时,是不需要隐藏菜单的
}function delay(fn,parm,scope,config)
{
var start = new Date();
var zero_interval = null;
var config = config || [];
var h = function(){
if(new Date()-start >=parm){
clearInterval(zero_interval);
fn.apply(scope,config);
}
}
zero_interval = setInterval(h,parm);
}
function showalpha(obj,b){
if(b <=100)
{
b=b+2
}
else
{
return
}
obj.filters.alpha.opacity=b;
setTimeout(function(){showalpha(obj,b)},5);
}
function hiddenalpha(obj,b){
if(b >5)
{
b=b-5
}
else
{
return
}
obj.filters.alpha.opacity=b;
setTimeout(function(){hiddenalpha(obj,b)},2);
}</script>
</head>
<body>
<span id="SortList4" ShowTitle="False"><div class="SortList4_Info_List_Div" id="SortList4_Info_List_Div" style="height:;width:;">
<div id="SortList4_Sort1_AllItem_id" class="SortList4_Sort1_AllItem_class">
<div id="SortList4_Sort1_Item_0" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_0" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=1&Sort2=1" target="_parent" title="灭火前线"><img src="../image/Sort/2007111512125.gif" alt="灭火前线" /></a>
</div><div id="SortList4_Sort2_AllItem_id_0" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_0_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_0_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=1&Sort2=1&Sort3=1" target="_parent" title="典型战例">典型战例</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_0_1" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_0_1" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=1&Sort2=2&Sort3=1" target="_parent" title="灭火报道">灭火报道</a></li>
</ul>
</div>
</div> </div>
</div>
<div id="SortList4_Sort1_Item_1" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_1" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=1" target="_parent" title="抢险救援"><img src="../image/Sort/2007111512212.gif" alt="抢险救援" /></a>
</div><div id="SortList4_Sort2_AllItem_id_1" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_1_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_1_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=1&Sort3=1" target="_parent" title="社会救援">社会救援</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_1_1" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_1_1" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=2&Sort2=2&Sort3=1" target="_parent" title="灾难抢险">灾难抢险</a></li>
</ul>
</div>
</div> </div>
</div>
<div id="SortList4_Sort1_Item_3" class="SortList4_Sort1_Item_Div" onmouseover="showsort1(this);" onmouseout="hiddensort1(this);">
<div id="SortList4_Sort1_Img_3" class="SortList4_Sort1_Img_Div">
<a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=1" target="_parent" title="消防文化"><img src="../image/Sort/200711151230.gif" alt="消防文化" /></a>
</div><div id="SortList4_Sort2_AllItem_id_3" class="SortList4_Sort2_AllItem_class">
<div id="SortList4_Sort2_Item_3_0" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_3_0" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=1&Sort3=1" target="_parent" title="消防史话">消防史话</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_3_1" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_3_1" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=2&Sort3=1" target="_parent" title="消防摄影">消防摄影</a></li>
</ul>
</div>
</div>
<div id="SortList4_Sort2_Item_3_2" class="SortList4_Sort2_Item_Div">
<div id="SortList4_Sort2_Titel_3_2" class="SortList4_Sort2_Titel_Div">
<ul>
<li><a href="/Pages/NewsSort.aspx?Sort1=4&Sort2=3&Sort3=1" target="_parent" title="消防艺术品">消防艺术品</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div></span>
</body>
</html>