求大神帮忙改下这个js 为什么这么快

qingwadaxia_1 2017-10-08 11:01:48

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#cc {
width:200px;
height:200px;
background:red;
position:absolute;
top:100%;
left:50px;
margin-top:-200px;
margin-left:-100px;

}
</style>
</head>
<body>
<div id="cc"></div>
<script>
var cc = document.getElementById("cc");
var time = null;

time=setInterval(function(){
cc.style.top=cc.offsetTop-1+"px";
},30);

</script>
</body>
</html>

这个太快了如果加长时间的话，又很慢很卡顿的那种不是那种缓缓平滑过渡的感觉非常奇怪不知道调什么参数还是哪里错了

...全文

412 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

红枣花生绿豆粥 2017-10-09

打赏
举报

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
#cc {
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    top:100%;
    left:50px;
    }
  </style>
 </head>
 <body>
<div id="cc"></div>
<script>
var cc = document.getElementById("cc");
var time = null;

time=setInterval(function(){
cc.style.top=cc.offsetTop-1+"px";
if(parseInt(cc.style.top)<=0){clearInterval(time)}
},0);

</script>
 </body>
</html>

clark_kidd 2017-10-09

打赏
举报

你能不能考虑使用jQuery的animate实现这样的效果呢？或者用css3的animate。自己写setInterval既原始又不平滑

qq_38378954 2017-10-09

打赏
举报

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #cc { width:200px; height:200px; background:red; position:absolute; top:500px; } </style> </head> <body> <button onclick="oncli()">执行</button> <div id="cc"></div> <script> var cc = document.getElementById("cc"); var time = null; time=setInterval(function(){ cc.style.top=cc.offsetTop-1+"px"; },30); </script> </body> </html>

红枣花生绿豆粥 2017-10-09

打赏
举报

你的错在是：因为offsetTop= parseInt(cc.style.top)+ parseInt(cc.style.margin-top); 所以cc.style.top=cc.offsetTop-1+"px";就可以变成 cc.style.top＝parseInt(cc.style.top)+ parseInt(cc.style.margin-top)-1+"px";你知道你写了margin-top:-200px; 你换进去cc.style.top＝parseInt(cc.style.top)+(-200)-1+"px" 那么每次就是要跑-201px; 要不你把margin-top 值改成0，100px;你试一下，是100px时，它会向下跑呢。那么每次就是要跑99px. 表达不是很好，希望能帮到你。

cinteresting 2017-10-09

打赏
举报

top和margin-top一起用了每次移动201px 当然看上去卡顿啦！

qingwadaxia_1 2017-10-09

打赏
举报

引用 6 楼 caomingwumr8 的回复:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
#cc {
    width:200px;
    height:200px;
    background:red;
    position:absolute;
    top:100%;
    left:50px;
    }
  </style>
 </head>
 <body>
<div id="cc"></div>
<script>
var cc = document.getElementById("cc");
var time = null;

time=setInterval(function(){
cc.style.top=cc.offsetTop-1+"px";
if(parseInt(cc.style.top)<=0){clearInterval(time)}
},0);

</script>
 </body>
</html>

请问我的为什么不能这样平滑过渡呢？大神你的就可以我是错在哪了

qingwadaxia_1 2017-10-09

打赏
举报

引用 4 楼 qq_38378954 的回复:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #cc { width:200px; height:200px; background:red; position:absolute; top:500px; } </style> </head> <body> <button onclick="oncli()">执行</button> <div id="cc"></div> <script> var cc = document.getElementById("cc"); var time = null; time=setInterval(function(){ cc.style.top=cc.offsetTop-1+"px"; },30); </script> </body> </html>

请问我的为什么不能这样平滑过渡呢？大神你的就可以我是错在哪了

我不是王校 2017-10-09

打赏
举报

你这个是匀速运动，缓冲运动会比较平缓，而且最好不要用offsetTop之类的，用currentStyle和getComputedStyle封装个函数，获取top值。缓冲运动需要几个参数，一个是物体运动目标点iTarget，一个是当前的top值，用我告诉你的方法去获取，用目标值减去当前的top，除以8，就是速度iSpeed，这样效果应该就可以了。另外，还涉及到取整的问题，这个也需要注意下。

zwz-2020 2017-10-08