js的settimeout函数问题,浏览器在执行的时候忽略了延时,目地是http://www.zendstudio.net/顶部的切换效
<styletype="text/css">#main{position:absolute;width:1000px;left:10%;height:500px;over...
<style type="text/css">
#main{position:absolute;width:1000px;left:10%;height:500px;overflow:hidden;}
#left{position:absolute;float:left;width:800px;height:500px;}
#right{float:right;width:20%px;height:500px;}
#test-first{position:absolute;top:0px;background:url(images/01.jpg);height:500px;}
#test-second{position:absolute;top:500px;background:url(images/02.jpg);height:500px;}
#test-third{position:absolute;top:1000px;background:url(images/03.jpg);height:500px;}
ul{list-style-type:none;}
li{text-align:center;}
</style>
<script type="text/javascript">
function test(){
var a=document.getElementsByTagName("li");
for(i=0;i<a.length;i++){
a[i].onmouseover=function(i){
return function(){
var b=document.getElementById("left").getElementsByTagName("div");
var c=b[i].style;
var distance=getCssValue(b[i]);
var constDis=distance;
//var temp=0;
while(distance!=0){
setTimeout("hello",200);
change(b,distance,constDis);
distance=getCssValue(b[i]);
//temp++;//防死循环
//if(temp>5)break;
}
}
}(i);
}
}
function change(arr,currDis,cDis){
if(currDis>0)cDis=5;
else cDis=-5;
for(var j=0;j<arr.length;j++){
var tDis=getCssValue(arr[j]);
tDis=tDis-cDis;
arr[j].style.top=tDis+"px";
}
}
function getCssValue(obj){//获取css top属性值
return obj.currentStyle?parseInt(obj.currentStyle.top):parseInt(document.defaultView.getComputedStyle(obj,false).top);
}
function hello(){//for test
//alert("hello world");
}
</script>
</head>
<body onload="test()">
<div id="main">
<div id="left">
<div id="test-first">
<?php echo "it's the first div" ?>
</div>
<div id="test-second">
<?php echo "it's the second div" ?>
</div>
<div id="test-third">
<?php echo "it's the third div" ?>
</div>
</div>
<div id="right">
<ul>
<li><a href='#' name="list">first</a></li>
<li><a href='#' name="list">second</a></li>
<li><a href='#' name="list">third</a></li>
</ul>
</div>
</div>
</body> 展开
#main{position:absolute;width:1000px;left:10%;height:500px;overflow:hidden;}
#left{position:absolute;float:left;width:800px;height:500px;}
#right{float:right;width:20%px;height:500px;}
#test-first{position:absolute;top:0px;background:url(images/01.jpg);height:500px;}
#test-second{position:absolute;top:500px;background:url(images/02.jpg);height:500px;}
#test-third{position:absolute;top:1000px;background:url(images/03.jpg);height:500px;}
ul{list-style-type:none;}
li{text-align:center;}
</style>
<script type="text/javascript">
function test(){
var a=document.getElementsByTagName("li");
for(i=0;i<a.length;i++){
a[i].onmouseover=function(i){
return function(){
var b=document.getElementById("left").getElementsByTagName("div");
var c=b[i].style;
var distance=getCssValue(b[i]);
var constDis=distance;
//var temp=0;
while(distance!=0){
setTimeout("hello",200);
change(b,distance,constDis);
distance=getCssValue(b[i]);
//temp++;//防死循环
//if(temp>5)break;
}
}
}(i);
}
}
function change(arr,currDis,cDis){
if(currDis>0)cDis=5;
else cDis=-5;
for(var j=0;j<arr.length;j++){
var tDis=getCssValue(arr[j]);
tDis=tDis-cDis;
arr[j].style.top=tDis+"px";
}
}
function getCssValue(obj){//获取css top属性值
return obj.currentStyle?parseInt(obj.currentStyle.top):parseInt(document.defaultView.getComputedStyle(obj,false).top);
}
function hello(){//for test
//alert("hello world");
}
</script>
</head>
<body onload="test()">
<div id="main">
<div id="left">
<div id="test-first">
<?php echo "it's the first div" ?>
</div>
<div id="test-second">
<?php echo "it's the second div" ?>
</div>
<div id="test-third">
<?php echo "it's the third div" ?>
</div>
</div>
<div id="right">
<ul>
<li><a href='#' name="list">first</a></li>
<li><a href='#' name="list">second</a></li>
<li><a href='#' name="list">third</a></li>
</ul>
</div>
</div>
</body> 展开
2个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询