html5 svg模拟人体过X光射线图形特效免费下载

一款很有趣的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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录