<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多个属性同时渐变</title>
<style>
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>
<style>
</style>
</head>
<body>
<img id="target" src="images/get.jpg" alt="气球" />
<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>