                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JS動畫效果

這個怎么不動的？

<!DOCTYPE html>

<html>

<head>

</head>

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>

window.onload = function(){

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

wsc.onmouseover = function(){

startMove();

}

function startMove(){

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

setInterval(function(){

wsc.style.left = wsc.offsetLeft+10+'px';

},30)

}

</script>

</body>

</html>

吳思超0

2015-12-10

源自：JS動畫效果 2-1

關注問題我要回答

675

操作

收起

2 回答

李曉健
2015-12-10

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>練習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();
????????}
????}
????function?startMove(){
????????var?wsc?=?document.getElementById('div1');
????????setInterval(function(){
????????????wsc.style.left?=?wsc.offsetLeft+10+'px';
????????},30)
????}
</script>
</body>
</html>

你上面寫的class ?你下面用getElementById 去取，肯定取不到呀