就是运行不出来,求解

来源:2-1 JS速度动画

哈尔波儿

2018-08-08 12:38

<!DOCTYPE html>

<html>


<head>

<meta charset="utf-8" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无解</title>

<style type="text/css">

body,

div,

span {

margin: 0;

padding: 0;

}

#div1 {

width: 200px;

height: 200px;

background: red;

position: relative;

left: -200px;

top: 0;

}

#div1 span {

width: 20px;

height: 50px;

background: blue;

position: absolute;

left: 200px;

top: 75px;

}

</style>

<script type="text/javascript">

window.onload=function(){

var da=document.getElementById("div1");

da.onmouseover=function(){

startMove(0);

}

da.onmouseout=function(){

startMove(-200);

}

}

var timer=null;

function startMove(iTarget){

clearInterval(timer);

var da=document.getElementById("div1");

timer=setInterval(function(){

var speed=0;

if(da.offsetLeft<iTarget){

speed=10;

}

else{

speed=-10;

}

if(da.offsetLeft==iTarget){

clearInterval(timer);

}

else{

da.style.width=da.offsetLeft+speed+"px";

}

},30);

}

</script>

</head>


<body>

<div id="div1">

<span id="share">分享</span>

</div>

</body>


</html>


写回答 关注

1回答

  • 慕先生5247145
    2018-08-08 15:55:55
    已采纳

    第58行代码错了

    不是da.style.width=da.offsetLeft+speed+"px"; 

    时 da.style.left=da.offsetLeft+speed+"px";


    哈尔波儿

    非常感谢!

    2018-08-09 13:25:34

    共 1 条回复 >

JS动画效果

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

113923 学习 · 1443 问题

查看课程

相似问题