                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

求教这个错在哪？

<!DOCTYPE html>

<html>

<head>

<title>js动画制作</title>

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px;

}

</style>

function startqwe(speed){

var qwe=document.getElementById('div1');

var speed=document.getElementById('txt1').value;

setInterval(function(){qwe.style.left=qwe.offsetLeft+speed+'px';},1000);

</script>

</head>

<body>

设置速度<input type="text" id="txt1" />px/s

</body>

</html>

想设计一个自定义速度的运动结果没有反应麻烦大神看下谢谢

死之外科医生

2017-03-31

源自：JS动画效果 2-2

关注问题我要回答

710

操作

收起

2 回答

小狗旺旺回答被采纳 +3 积分
2017-03-31

首先获取元素要在文档加载完成之后才能获取到的，其次是你那个速度是网页加载完成的时候输入的，所以要在点击事件里面获取，才能得到输入的速度值，这个值是个字符串用parseInt()转义下，speed是全局变量可以在函数里面使用，不用带进去

<!DOCTYPE html>

<html>

<head>

<title>js动画制作</title>

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px;

}

</style>

</head>

<body>

设置速度<input type="text" id="txt1"/>px/s

//获取元素要在文档加载完成之后在获取，一般写在最后面

var qwe=document.getElementById('div1');

var speed=document.getElementById('txt1').value;

function startqwe(){

//点击之后获取到速度值

speed=document.getElementById('txt1').value;

setInterval(function(){qwe.style.left=qwe.offsetLeft+parseInt(speed)+'px';

},1000);

}

</script>

</body>

</html>

1 回复有任何疑惑可以回复我~

收起回答

死之外科医生提问者

非常感谢！

2017-03-31 回复有任何疑惑可以回复我~

死之外科医生提问者

为什么运动看起来是那种一顿一顿的感觉不像那种很平滑的匀速运动

2017-03-31 回复有任何疑惑可以回复我~

小狗旺旺

因为设定的是1000毫秒运动一次呀，也就是说这是一秒钟一帧的动画，就像幻灯片一样，可以通过缩短运动时间间隔，从而使画面变得流畅

2017-03-31 回复有任何疑惑可以回复我~

咖啡很苦
2017-03-31

赞同上面的说法

0 回复有任何疑惑可以回复我~

收起回答

0/150

提交

取消

JS动画效果

参与学习 113925 人
解答问题 1443 个

通过本课程JS动画的学习，从简单动画开始，逐步深入各种动画框架封装

进入课程

本课相似问答

2 回答错在哪里？求大神帮忙！

2 回答我那错了？求指教。

3 回答一个小问题，求教？

1 回答求解这段代码的问题在哪？

2 回答求教有一个小问题！

搜索更多本课相关问答

求教这个错在哪？

我要回答关注问题

热搜

最近搜索清空

求教这个错在哪？

2 回答

本课相似问答

求教这个错在哪？