投稿 搜索

热门文章

当前位置: 站长天下 / Html5 CSS3 / html5 svg人体X射线图特效
html5 svg人体X射线图特效
标签:

插件介绍

    这是一款html5基于svg绘制人体过X光射线图形特效。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-30
    阅读:

html5 svg人体X射线图特效

简要教程

这是一款html5基于svg绘制人体过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>