怎么让它计算到整数啊?
现在是计算的时候不会到-500;
它会跳过-500;所以会一直再滚动着..
有什么方法可以计算到整数的?
貌似有Math里的方法可以吗?
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>无标题文档</title>
<style type="text/css">
*{margin:0;padding:0;}
ul,li{list-style:none}
.red{ background:red;}
.blue{ background:blue}
.wrap{width:500px;height:300px;overflow:hidden;position:relative;margin:55px auto}
.inner{position:absolute;left:0;top:0;}
.inner li{float:left;width:500px;height:300px;color:#fff}
.orange{ background:orange}
.nav{position:absolute;bottom:5px;right:5px;}
.nav li{float:left;padding:1px 4px;background:orange;border:1px solid #000;margin-right:4px}
.nav .nav_cur{background:#333;color:#fff;}
#box{ position:absolute;top:50px;left:0;z-index:88}
</style>
<!--<script type="text/javascript" src="jquery-1.6.min.js">
</script>-->
</head>
<body>
<div class="box" id="box">sd</div>
<div class="wrap">
<div class="inner" id="inner">
<ul>
<li class="red">1</li>
<li class="blue">2</li>
<li class="red">3</li>
</ul>
</div>
<div class="nav">
<li class="nav_cur">1</li>
<li>2</li>
</div>
</div>
<script type="text/javascript">
var timer;
var u=0;
function $(id){
return document.getElementById(id)
}
var i=0;
var cur;
var arr = [0,-500,-1000];
function aa(){
if($("inner").offsetLeft != arr[i+1]){
u += parseInt((arr[i+1] + $("inner").offsetLeft)/20);
console.log(u)
timer = setTimeout(function(){aa()},10)
}
else{
i++;
if(i ==3){
clearInterval(cur)
}
clearTimeout(timer)
}
$("inner").style.left = u+"px";
}
cur = setInterval(function(){
aa()
},2000)
</script>
</body>
</html>
紫衣仙女浏览 532回答 4
4回答
-
海绵宝宝撒
你可以自己判断啊，你计算出来的相邻两个值一个比-500大，一个比-500小，这时候你就把值直接设成-500不就行了。 -
猛跑小猪
没太看懂问题，不过只是取整的话，可以用Math.floor() -
SMILET
假如计算到-482 下一个是-512 -534 -587....... 它不计算到-500. 这样怎么办啊? -
潇湘沐
@深蓝色梦想: 不太明白你要做什么，看起来像是个跑马灯，但里面设置了很多奇怪的动作，不晓得有什么特别的用意，这个代码是可以跑的，看看是不是你要的效果，这是在你的基础上改的，网上很多很好的代码，如果没什么极特别的要求，不如去网上找一下吧： <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8"><title>无标题文档</title><style type="text/css">*{margin:0;padding:0;} ul,li{list-style:none} .red{ background:#f00;} .blue{ background:#00f;} .green{background:#0f0;} .wrap{width:500px;height:300px;overflow:hidden;position:relative;margin:55px auto} .inner{position:absolute;left:0;top:0;float:left;} .inner ul{width:1800px;float:left;overflow:visible;} .inner li{float:left;width:500px;height:300px;color:#fff;display:block;} .orange{ background:orange} .nav{position:absolute;bottom:5px;right:5px;} .nav li{float:left;padding:1px 4px;background:orange;border:1px solid #000;margin-right:4px} .nav .nav_cur{background:#333;color:#fff;} #box{ position:absolute;top:50px;left:0;z-index:88}</style><!--<script type="text/javascript" src="jquery-1.6.min.js"></script>--></head><body><div class="box" id="box">sd</div><div class="wrap"> <div class="inner" id="inner"> <ul> <li class="red">1</li> <li class="blue">2</li> <li class="green">3</li> </ul> </div> <div class="nav"> <li class="nav_cur">1</li> <li>2</li> </div></div><script type="text/javascript"> var timer; var u=0; function $(id){ return document.getElementById(id) } var i=0; var cur; var arr = [0,-500,-1000]; function aa(){ if($("inner").offsetLeft > arr[i]){ u += parseInt((arr[i] + $("inner").offsetLeft)/20); console.log(u) timer = setTimeout(function(){aa()},1000) } else{ i++; if(i ==3){ clearInterval(cur); $("inner").offsetLeft=0; } clearTimeout(timer) } $("inner").style.left = u+"px"; } cur = setInterval(function(){ aa() },1000) </script></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript