Animation - 如何通過(guò)Javascript創(chuàng)建動(dòng)畫和更改target屬性
我們想知道如何通過(guò)Javascript創(chuàng)建動(dòng)畫和更改target屬性。
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
p{padding-left:60px;}
#ball{
border-radius:50px;
width:50px;
height:50px;
background:#ddd;
position:absolute;
top:0;
left:0;
-moz-transition: all 0.2s;
-webkit-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
#stage {
height:800px;
width:480px;
background:#333;
}
</style>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var ball = document.getElementById('ball');
document.addEventListener('click', function(ev){
if (ev.clientX<450 && ev.clientY<770) {
ball.style.left = (ev.clientX-25)+'px';
ball.style.top = (ev.clientY-25)+'px';
} else {
}
},false);
}//]]>
</script>
</head>
<body>
Click the black stage. Ball will follow.
<div id="stage">
<div id="ball"></div>
</div>
</body>
</html>
【move】
