为什么不管怎么点 图片老是显示在b文字前面 为什么不显示在a文字前面 求高手解答
下面是代码<ul>
<li><a onmouseOver="mouseOver(this)" onmouseOut="mouseOut(this)" x="1">a<img src="1.png" style="position:absolute; top:-149;" name="divP" /></a><li>
<li><a onmouseOver="mouseOver(this)" onmouseOut="mouseOut(this)" x="2">b<img src="1.png" style="position:absolute; top:-149;" name="divP1" /></a><li>
</ul>
<script type="text/javascript">
function mouseOver(e){
var a=0;
var d=e.getAttribute("x");
if(parseInt(d)==1){
function move(){a++;
if(a==49){clearInterval(time);}
divP.style.top = (divP.style.top.replace('px','')-0 +3);}
var time = window.setInterval(move,10);}//下面这段去除后 a标签那张图片才会显示在a标签前面 没去除的话不管点b标签或者a标签都是显示在b 标签前面 求高手解决else if(parseInt(d)==2){
function move(){a++;
if(a==49){clearInterval(time);}
divP1.style.top = (divP1.style.top.replace('px','')-0 +3);}
var time = window.setInterval(move,10);}
} </script><style type-"text/css">
ul,li{margin: 0; padding: 0; border: 0;}
ul {width: 700px; margin: 0 auto; text-align: center;}
ul li { float:right;list-style: none;}
ul li a {
display: block;
width: 97px;
height: 77px;
padding: 72px 0 0 0;
margin: 0 32px 0 32px;
font: bold 16px Helvetica;
}
</style>
下面是代码<ul>
<li><a onmouseOver="mouseOver(this)" onmouseOut="mouseOut(this)" x="1">a<img src="1.png" style="position:absolute; top:-149;" name="divP" /></a><li>
<li><a onmouseOver="mouseOver(this)" onmouseOut="mouseOut(this)" x="2">b<img src="1.png" style="position:absolute; top:-149;" name="divP1" /></a><li>
</ul>
<script type="text/javascript">
function mouseOver(e){
var a=0;
var d=e.getAttribute("x");
if(parseInt(d)==1){
function move(){a++;
if(a==49){clearInterval(time);}
divP.style.top = (divP.style.top.replace('px','')-0 +3);}
var time = window.setInterval(move,10);}//下面这段去除后 a标签那张图片才会显示在a标签前面 没去除的话不管点b标签或者a标签都是显示在b 标签前面 求高手解决else if(parseInt(d)==2){
function move(){a++;
if(a==49){clearInterval(time);}
divP1.style.top = (divP1.style.top.replace('px','')-0 +3);}
var time = window.setInterval(move,10);}
} </script><style type-"text/css">
ul,li{margin: 0; padding: 0; border: 0;}
ul {width: 700px; margin: 0 auto; text-align: center;}
ul li { float:right;list-style: none;}
ul li a {
display: block;
width: 97px;
height: 77px;
padding: 72px 0 0 0;
margin: 0 32px 0 32px;
font: bold 16px Helvetica;
}
</style>
解决方案 »
- Extjs求助
- 呼叫__木北北__ ,你换我分来T_T
- Extjs 我无法执行success函数
- 中秋散分加问题帖:如何取得iframe中的src动态改变后的路径.
- 请问如何把当前网页的内容输出成pdf文件让客户下载呢?????????????????在线等待!!!!!!!!!!!!!!!
- 有没有不用window.open来让窗口全屏显示的方法?
- 我想问问,有人知道美团网api的使用方法么?
- 如何让客户端自动下载activex控件并注册?谢谢了!
- 一个小小问题
- jquery hide()隐藏顺序
- js中怎么给属于同一class的按钮设置相同的【mouseenter】效果
- JQUERY延迟的问题
2:divP和divP1改为id命名
3:mouseOut没见你贴出来,以下代码中的mouseOut是猜测你需要的功能写的
4:Lz逻辑是清晰与混乱的综合体,应该先整理好,然后再写,这样,代码会更清晰
<script type="text/javascript">
var stop={};
function move(a,b,c){
if(b==200 || stop[c]){return};
b++;
var t=parseInt(a.style.top)||0;
a.style.top = t+3+'px';
setTimeout(function(){move(a,b,c)},10);
};
function mouseOver(i){
var o=document.getElementById('divP'+i);
//o.style.top='0px';//这句只是为了使其复位,不加的话再次触发事件时将从原位置继续向下运动
stop[i]=!1;
move(o,0,i);
};
function mouseOut(i){
stop[i]=!0;
}
</script>
<ul>
<li><a onmouseover="mouseOver(1)" onmouseout="mouseOut(1)">a<img src="1.gif" style="position:absolute; top:-149;" id="divP1" /></a><li>
<li><a onmouseover="mouseOver(2)" onmouseout="mouseOut(2)">b<img src="1.gif" style="position:absolute; top:-149;" id="divP2" /></a><li>
</ul>
<style type="text/css">
ul,li{margin: 0; padding: 0; border: 0;}
ul {width: 700px; margin: 0 auto; text-align: center;}
ul li { float:right;list-style: none;}
ul li a {
display: block;
width: 97px;
height: 77px;
padding: 72px 0 0 0;
margin: 0 32px 0 32px;
font: bold 16px Helvetica;
}
</style>
1:a表示当前需要移动的对象
2:b表示当前对象已经移动的次数
3:c表示当前移动对像的一个标识,主要是mouseOut函数中需要停止对象移动时需要这个标识。好让move函数知道当前对象是否需要继续移动直到限定的200次var stop={};//定义一个对象,用来全局保存对移动对象的控制状态
比如:mouseOver(1)中,
stop[i]=!1;
与
stop["1"]=false;等效,表示当前对象不需要停止它,让它继续移动mouseOut(1)中,
stop[i]=!0;
与
stop["1"]=true;等效,表示需要当前正在移动的对象停止移动 move(a,b,c)中
if(b==200 || stop[c]){return};
表示,当移动次数到200次,或者mouseOut中触发了停止请求时。不再继续往下执行
否则,通过执行setTimeout(function(){move(a,b,c)},10);继续执行
感觉和你说这些也不知道你能明白多少。该明白的看了我之前的代码就应该清楚。不明白的感觉这些说和不说也没多大区别咧建议Lz你抽时间看看js基础,磨刀不误砍柴工嘛