大神发下代码啊。图标题所示,
window.onload = function() {
var div = document.getElementById('box'),
centerX = div.clientWidth / 2,
centerY = div.clientHeight / 2,
left = div.offsetLeft,
top = div.offsetTop;
div.addEventListener("mousemove", function(event) {
var pageX = event.pageX,
pageY = event.pageY;
var dy = pageY - (top + centerY),
dx = pageX - (left + centerX);
var angle=180/Math.PI*Math.atan2(dy,dx);
document.getElementById('img').style.transform="rotate("+angle+"deg)";
}, false)
}
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
个人觉得关键还是得用到CSS3过渡动画transition配合CSS3变换transform.
过渡: transition: all 1s ease-in-out;
旋转: transform: rotate(10deg);
倾斜: transform: skew(10deg);
缩放: transform: scale(3.0);
位移: transform: translate(100px, 10px);
至于"拖放"操作,可能得组合
mousedown/mousemove/mouseup
事件,可以看这里.