为了账号安全,请及时绑定邮箱和手机立即绑定

求教这个错在哪?

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<style type="text/css">

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px; 

    }

</style>

<script type="text/javascript">

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>

<div id="div1"></div>

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

<input type="button" value="点击开始运动" style="position:relative;" onclick="startqwe(speed)" />


</body>

</html>

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

正在回答

3 回答

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

<style type="text/css">

#div1{

width:200px;

height:200px;

border:2px solid red;

position:absolute;

left:0px;

top:50px; 

    }

</style>

</head>

<body>

<div id="div1"></div>

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

<input type="button" value="点击开始运动" style="position:relative;" onclick="startqwe()" />


<script type="text/javascript">

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

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 回复 有任何疑惑可以回复我~
#1

死之外科医生 提问者

非常感谢!
2017-03-31 回复 有任何疑惑可以回复我~
#2

死之外科医生 提问者

为什么运动看起来是那种一顿一顿的感觉不像那种很平滑的匀速运动
2017-03-31 回复 有任何疑惑可以回复我~
#3

小狗旺旺

因为设定的是1000毫秒运动一次呀,也就是说这是一秒钟一帧的动画,就像幻灯片一样,可以通过缩短运动时间间隔,从而使画面变得流畅
2017-03-31 回复 有任何疑惑可以回复我~

第一个问题:要分什么元素,如果是块状元素,在未设置容器宽度时,是100%。但是如果为内联元素(也可叫行内素)在未设置容器宽度时,为元素内容撑起来的宽度。

ohpysv

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

赞同上面的说法

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

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113939    人
  • 解答问题       1443    个

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

进入课程

求教这个错在哪?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信