代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3Transition动画</title>
<style type="text/css">
img#target{
position:absolute;
-moz-transition:left 5s linear,top 5s linear;
-webkit-transition:left 5s linear,top 5s linear;
-o-transition:left 5s linear,top 5s linear;
}
</style>
</head>
<body>
<img id="target" src="../Content/img/cat.png" />
<script type="text/javascript">
var target = document.getElementById("target");
target.style.left = "0px";
target.style.top = "0px";
//为鼠标按下事件绑定监听器
document.onmousedown = function (evt) {
//讲鼠标事件的X、Y坐标赋给图片的left、top
target.style.left = evt.pageX + "px";
target.style.top = evt.pageY + "px";
}
</script>
</body>
</html>
效果: