html5实现拖动直线,HTML5 能跟踪鼠标移动的线条阵列

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

for (var i = 0; i < 64; i++) {

$(".area-in").append('')

}

document.addEventListener("mousemove", function(e) {

for (var l = 0; l < $(".block").length; l++) {

$(".block:nth-child(" + (l + 1) + ")").each(function() {

var offset = $(this).offset(),

center_x = (offset.left) + ($(this).width() / 2),

center_y = (offset.top) + ($(this).height() / 2),

mouse_x = e.pageX,

mouse_y = e.pageY,

radians = Math.atan2(mouse_x - center_x, mouse_y - center_y),

degree = (radians * (180 / Math.PI) * -1) + 90;

$(this).css('-moz-transform', 'rotate(' + degree + 'deg)');

$(this).css('-webkit-transform', 'rotate(' + degree + 'deg)');

$(this).css('-o-transform', 'rotate(' + degree + 'deg)');

$(this).css('-ms-transform', 'rotate(' + degree + 'deg)');

$(this).css('transform', 'rotate(' + degree + 'deg)');

})

}

})

})