                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JS動畫效果

javascript

<!doctype?html>
<html>

<head>
<meta?charset="UTF-8"?/>
<title>Document</title>
<style?type="text/css">
*?{
margin:?0;
padding:?0;
}

#d1?{
position:?relative;
width:?200px;
height:?150px;
/*border:?1px?solid?#f5f5f5;*/
background-color:?yellow;
left:?-180px;
top:?0px;
}

#d1?span?{
position:?absolute;
width:?20px;
height:?50px;
background-color:?green;
color:?white;
/*border:?1px?solid?#f5f5f5;*/
font-family:?"微軟雅黑";
text-align:?center;
left:?200px;
top:?55px;
}
</style>

</head>

<body>
<div?id="d1">
<span?id="share">
分享
</span>
</div>
<script?type="text/javascript">
window.onload?=?function()?{
var?divd1?=?document.getElementById("?d1");
divd1.onmouseover?=?function()?{
startMove();
}
}

function?startMove()?{
var?divd1?=?document.getElementById("?d1");
setInterval(function()?{
divd1.style.left?=?divd1.offsetLeft?+?10?+?'px';
},?30)
}
</script>
</body>

</html>