                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JS動(dòng)畫(huà)效果

JS怎么一直在抖動(dòng)

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>練習(xí)JS</title>
</head>
<style?type="text/css">
????body{
????????margin:0;
????????padding:0;
????}
????#div1{
????????width:200px;
????????height:140px;
????????background-color:?red;
????????left:?-202px;
????????position:?relative;
????}
????#div1?span{
????????width:20px;
????????height:?50px;
????????background:?#eee;
????????position:?absolute;
????????left:?200px;
????????top:75px;
????}
</style>
<body>
<div?id="div1">
????<span?id="share">分享</span>
</div>
<script>
????window.onload?=?function(){
????????var?wsc?=?document.getElementById('div1');
????????wsc.onmouseover?=?function(){
????????????startMove(0);
????????}
????????wsc.onmouseout?=?function(){
????????	starMove(-200);
????????}
????}
????var?timer?=?null;
????function?startMove(iTarget){
????	clearInterval(timer);
????????var?wsc?=?document.getElementById('div1');
????????timer?=?setInterval(function(){
????????	var?speed?=?0;
????????	if(wsc.offsetLeft?>?iTarget){
????????		speed?=?-10;
????????	}
????????		else{
????????		speed=10;
????????		}
????????	if(wsc.offsetLeft?==?iTarget){
????????		clearInterval(timer);
????????	}
????????else{
????????????wsc.style.left?=?wsc.offsetLeft?+?speed?+'px';
????????}
????????},30)
????}
</script>
</body>
</html>

JS怎么一直在抖動(dòng)，完全抄老師寫(xiě)的 ?可是還是一直在抖動(dòng)。。。到底哪里寫(xiě)錯(cuò)的？

吳思超0

2015-12-10

源自：JS動(dòng)畫(huà)效果 2-1

關(guān)注問(wèn)題我要回答

2279

操作

收起

4 回答

木子舟義
2015-12-10

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>練習(xí)JS</title>
</head>
<style?type="text/css">
????body{
????????margin:0;
????????padding:0;
????}
????#div1{
????????width:200px;
????????height:140px;
????????background-color:?red;
????????left:?-200px;
????????position:?relative;
????}
????#div1?span{
????????width:20px;
????????height:?50px;
????????background:?#eee;
????????position:?absolute;
????????left:?200px;
????????top:75px;
????}
</style>
<body>
<div?id="div1">
????<span?id="share">分享</span>
</div>
<script>
????window.onload?=?function(){
????????var?wsc?=?document.getElementById('div1');
????????wsc.onmouseover?=?function(){
????????????startMove(0);
????????}
????????wsc.onmouseout?=?function(){
????????????startMove(-200);
????????}
????}
????var?timer?=?null;
????function?startMove(iTarget){
????????clearInterval(timer);
????????var?wsc?=?document.getElementById('div1');
????????timer?=?setInterval(function(){
????????????var?speed?=?0;
????????????console.log(wsc.offsetLeft);
????????????console.log(iTarget);
????????????if(wsc.offsetLeft?>?iTarget){
????????????????speed?=?-10;
????????????}else{
????????????????console.log('出');
????????????????speed=10;
????????????????}

????????????if(wsc.offsetLeft?==?iTarget){
????????????????clearInterval(timer);
????????????}?else{
????????????wsc.style.left?=?wsc.offsetLeft?+?speed?+'px';
????????}
????????},30)
????}
</script>
</body>
</html>