JS + svg鼠标单击实现放大镜图片局部放大效果

image zoom at local position

svg, css, zoom

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3309
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = 800,
    h = 1200,
    offsetX = $('#imgBox').offset().left,
    scale = 1.5,
    scaling = false;

$('#imgBox').click(function(e) {
    scaling = true;
    (scale < 3.5) ? scale = scale * 1.33: scale = 1.5;
    TweenMax.to('#imgZoom', 0.1, {
        attr: {
            width: w * scale,
            height: h * scale,
            x: offsetX * (scale - 1) - e.pageX * (scale - 1),
            y: -e.pageY * (scale - 1)
        },
        onComplete: function() {
            scaling = false;
        }
    });
});

$('#imgBox').mousemove(function(e) {
    if (!scaling) {
        TweenMax.to('#mag', 0.3, {
            x: -offsetX + e.pageX,
            y: e.pageY
        });
        TweenMax.to('#masker', 0.3, {
            attr: {
                cx: -offsetX + e.pageX,
                cy: e.pageY
            }
        });
        TweenMax.to('#imgZoom', 0.3, {
            attr: {
                x: offsetX * (scale - 1) - e.pageX * (scale - 1),
                y: -e.pageY * (scale - 1)
            }
        });
    }
});

$('#imgBox').mouseenter(function(e) {
    TweenMax.to(['#mag', '#masker', '#imgZoom'], 0.3, {
        alpha: 1
    });
});

$('#imgBox').mouseleave(function(e) {
    TweenMax.to(['#mag', '#masker', '#imgZoom'], 0.3, {
        alpha: 0
    });
});

$(window).resize(function() {
    offsetX = $('#imgBox').offset().left;
});

编译

CSS

HTML

image zoom at local position

svg, css, zoom

编辑器支持Emmet

快捷键

image zoom at local position

svg, css, zoom

使用SVG feImage和feDisplacementMap滤镜属性实现的图片特效

使用svg filter和canvas实现的图像碎片化特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：