css 射线,X

JavaScript

/*

* Noel Delgado | @pixelia_me

*

*/

var svgElement = document.querySelector('svg');

var maskedElement = document.querySelector('#mask-circle');

var circleFeedback = document.querySelector('#circle-shadow');

var svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {

svgPoint.x = e.clientX;

svgPoint.y = e.clientY;

return svgPoint.matrixTransform(svg.getScreenCTM().inverse());

}

function update(svgCoords) {

maskedElement.setAttribute('cx', svgCoords.x);

maskedElement.setAttribute('cy', svgCoords.y);

circleFeedback.setAttribute('cx', svgCoords.x);

circleFeedback.setAttribute('cy', svgCoords.y);

}

window.addEventListener('mousemove', function(e) {

update(cursorPoint(e, svgElement));

}, false);

document.addEventListener('touchmove', function(e) {

e.preventDefault();

var touch = e.targetTouches[0];

if (touch) {

update(cursorPoint(touch, svgElement));

}

}, false);