一款很有趣的html5 svg模拟人体过X光射线图形特效,鼠标移上去看X射线效果,是不是很有意思。
js代码
<script>
/*
* 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);</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791