今天制作了一个Javascript的popMenu动画特效,类似于SF.net上的那种效果,但是很遗憾,现在还只能在Gecko引擎的浏览器下运行,而且还有一点不小的问题,在IE6中出现各种诡异的问题,我更是无从下手。
首先,我是把这样一个onmouseover事件绑到一个带有padding的链接上,出问题了。在IE6里,这个事件,包括onclick、onmouseout都不能被触发。而当我把事件放到一个普通的链接上,所有事件都可以被触发,不明白。
这是其一,另外在IE6中CSS的问题也不小,position:relative的时候得出的结果简直就是不着边际,这个问题简直没指望。
所以只能放弃IE了。在Firefox上也有个小问题。我把onmouseover事件绑定到菜单按钮上,把onmouseout事件绑到菜单本身上。
但是当鼠标移到div内的两个li之间的时候,居然触发了div的onmouseout事件,我只是百思不得其解,而且也找不到什么好的替代办法来解决这个问题,只能振臂高呼上帝的名字了。这li之间的鸿沟真的不可逾越吗??
相关代码如下:
HTML片段 <div class="guide" id="top_guide">
<ul class="guideMenu">
<li><a href="#" class="guideMenu_link">MenuItem0</a></li>
<li><a href="content.html" class="guideMenu_link">MenuItem1</a></li>
<li><a href="#" class="guideMenu_link">MenuItem2</a></li>
<li><a href="#" class="guideMenu_link">MenuItem3</a></li>
<li><a href="#" class="guideMenu_link">MenuItem4</a></li>
</ul>
<div class="popMenuDefault" id="forMenu0">
<ul class="popMenu">
<li class="popMenuItem">subMenuItem0</li>
<li class="popMenuItem">subMenuItem1</li>
<li class="popMenuItem">subMenuItem2</li>
</ul>
</div>
<div class="popMenuDefault" id="forMenu2">
<ul class="popMenu">
<li class="popMenuItem">subMenuItem0</li>
<li class="popMenuItem">subMenuItem1</li>
<li class="popMenuItem">subMenuItem2</li>
</ul>
</div>
</div>
CSS片段.guide{
position:relative;
width:770px;
background:#C00;
text-align:center;
padding:12px 0 12px 0;
}
.guideMenu{
list-style:none;
font-size:14px;
color:#FFF;
}
.guideMenu li{
display:inline;
}
a.guideMenu_link:link,a.guideMenu_link:visited{
padding:0 20px 0 20px;
color:#FFF;
}
a.guideMenu_link:hover{
padding:0 19px 0 19px;
border:1px #FFF solid;
background-color:#C00;
text-decoration:none;
}
div.popMenuDefault{
display:none;
background-color:#C00;
color:#FFF;
}
div.popMenuDefault div{
height:100%;
}
ul.popMenu{
list-style:none;
display:none;
}
li.popMenuItem{
position:static;
line-height:150%;
}
JavaScriptwindow.onload = function(){
var items = document.getElementById("top_guide").getElementsByTagName("ul")[0].getElementsByTagName("li");
for(var i=0;i<items.length;i++){
if("#" == items[i].getElementsByTagName("a")[0].href.charAt(items[i].getElementsByTagName("a")[0].href.length-1)){
items[i].getElementsByTagName("a")[0].setAttribute("onclick","return false;");
items[i].getElementsByTagName("a")[0].setAttribute("onmouseover","popmenu("+ i +");");
}
}
var divs = document.getElementById("top_guide").getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
divs[i].getElementsByTagName("ul")[0].setAttribute("onmouseout","killpop();");
}
};
function popmenu(index){
killpop();
var requiredId = "forMenu"+index;
var pop;
//alert(requiredId);
if(!(pop = document.getElementById(requiredId))){
//alert(" ");
return false;
}
var targetHeight = 20 * pop.getElementsByTagName("ul")[0].getElementsByTagName("li").length;
//alert(pop);
pop.style.position = "absolute";
pop.style.zIndex = "100";
pop.style.top = "40px";
pop.style.left = 100 + 115*index + "px";
pop.style.width = "120px";
pop.style.height = "0";
pop.style.display = "block";
pop.getElementsByTagName("ul")[0].style.display = "none";
popShow(requiredId, targetHeight, 10);
pop.getElementsByTagName("ul")[0].style.display = "block";
}
function killpop(){
var divs = document.getElementById("top_guide").getElementsByTagName("div");
for(var i=0;i<divs.length;i++){
if(divs[i].style.display == "block"){
var requiredId = divs[i].getAttribute("id");
var pop = divs[i];
pop.getElementsByTagName("ul")[0].style.display = "none";
popShow(requiredId, 0, 10);
pop.style.display = "none";
}
}
}
function popShow(elementId, target, interval){
var element = document.getElementById(elementId);
var height = parseInt(element.style.height);
if(element.movement){
clearTimeout(element.movement);
}
if(height == target){
return true;
}
if(height > target){
var dist = Math.ceil((height - target)/10);
height -= dist;
}
if(height < target){
var dist = Math.ceil((target - height)/10);
height += dist;
}
element.style.height = height + "px";
var repeat = "popShow('" + elementId + "'," + target + "," + interval +")";
element.movement = setTimeout(repeat, interval);
}
分享到:
相关推荐
安全生ۥ产是不可逾越的红线精选.doc
安全生产是不可逾越的红线.doc
高中历史之图说历史希腊文明六大不可逾越的贡献素材
基于假设测试理论的移动机器人快速不可逾越的地形识别算法
几何上不可七象形的7臂带有无法被复杂的结构变形破坏的轨距扇区,并且越来越多的证据表明这种构型在F理论中很典型。 我们研究与这些黄铜相关的强耦合物理学。 轴突轮廓是使用拉马努詹的椭圆函数理论计算到可替代的...
我们介绍了Deontic Defeasible Logic的一种变体来处理务实的奇数问题。 关键思想是,仅当每个单独的义务独立于对其他义务的违反时,才允许使用合取义务。 该解决方案在保持可行的计算复杂性的同时,也充分利用了逻辑...
建筑是不可逾越和摧毁的 物品是不可逾越但可被摧毁的 地图结构为: TileIndex:Integer; //保存地表的信息 ObjIndex:Integer; //保存地表之上的处于人物之下的建筑或者物品 CanMove:Boolean; //可以移动的 ...
超逼真Delphi泡泡堂游戏源码,切记:泡泡堂游戏中的地表只记录地面,不影响任何事物,建筑是不可逾越和摧毁的,物品是不可逾越但可被摧毁的。
一直以来, 开源软件缺少汉化和中文参考手册成为它与中文用户之间一条不可逾越的鸿沟. Redmine的汉化已经很好解决, 页面通过I18n处理支持国际化. 但它的参考手册一直是英文的, 没有中文, 令中文用户遗憾,经过长时间...
在地质层面建模和等值线的网格化中,网格节点插值是一个不可逾越的过程。断层约束下的插值算法研究,对带断层的地质层面建模和等值线绘制有重要的意义。目前在多数情况下断层信息不全,一般仅有断层的平面投影信息,没有...
是最完整的三级网络技术复习资料 三级不是每个人不可逾越的鸿沟 只要我们的知识点面面俱到
但是,通过对费希特调和结果的重新审视,我们不难发现,理性与道德信仰之间似乎总是存在某种不可逾越的鸿沟,这就是费希特处理历史与形而上学关系必然要面临的一个难题,同样也是其全部学说必定会遭遇的一个哲学困境。
美国著名未来学家阿尔温•托夫勒说:“电脑网络的建立和普及将彻底改变人类生存及...所以,构筑安全的电子商务信息环境,就成为了网络时代发展到一定阶段而不可逾越的“瓶颈”性问题,愈来愈受到国际社会的高度关注。
然而时过境迁,随着人们对数据存储要求的不断提高,这种硬盘的缺点也逐渐暴露出来,尤其是固有的机械结构成为其不可逾越的一道障碍。而最近两年,一股新的势力开始崭露头角,那就是用NAND型闪存作为存储介质的SSD...
国家四六级考试词组,四级高频词汇,了解更多的得四六级词汇让四六级不在是不可逾越的高墙。
在处理整合工厂至企业的挑战时,很多复杂性和问题随之产生,看起来像是一座视野范围内没有尽头或顶点的不可逾越的山脉。 在当今的商业环境中,合并、收购和拆分非常普遍,依附一套行业标准来完成这种整合时明智的。...
我们正处于大数据时代,人们言必及“大数据”,这里需要正视两个事实:一是当今的数据规模随时间以指数级...在双指数增长的算力需求与指数增长的算力供给之间产生了不可逾越的鸿沟,从而给关联大数据处理带来了严峻挑战
基于产权分析视角的初创期民营企业的公司治理结构研究,马鸿佳,,本文首先从产权分析的角度,提出公司治理结构命题产生的前提条件,并指出公司的初创阶段是每个企业不可逾越的发展阶段,这个阶段
广泛使用单片机(MCU) 设计系统克服了纯SSI 数字电路系统许多不可逾越的困难,是一个具有里程碑意义的飞跃。而DSP 以其极强的信号处理功能赢得了广阔的市场,得到了广泛地应用。近年来,PLD 器件迅速发展,尤其是CPLD...