HTML5使用不同精度的图片来实现图像放大镜效果

Universe Zoom 使用4张不同大小的图，改变放大镜的背景图达到缩放的视觉效果。这个方法视觉效果比CSS3的scale变换要好，但是性能差。

HTML5, magnifier, zoom

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

$(document).ready(function() {
    // Select 4x zoom by default.
    var zoom = 4;
    var outer = getOuterClass(zoom);
    var xOffset = $(outer).width() / 2;
    var yOffset = $(outer).height() / 2;

$(".wrapper").mousemove(function(e) {
        if (e.pageX < $('.wrapper').width() && e.pageY < $('.wrapper').height()) {
            $(outer).css('display', 'block');
            $(outer + '-text').css('display', 'block');

// Move the glass.
            $(outer + '-text').css('left', e.pageX - xOffset);
            $(outer + '-text').css('top', e.pageY - yOffset);
            $(outer).css('left', e.pageX - xOffset);
            $(outer).css('top', e.pageY - yOffset);

// Move the background depending on zoom.
            $(outer).css('background-position', ((e.pageX * zoom) * -1) + 'px ' + ((e.pageY * zoom) * -1) + 'px');
        } else {
            $(outer).css('display', 'none');
            $(outer + '-text').css('display', 'none');
        }
    });

// Change zooms when select box is used.
    $('#selector').change(function() {
        zoom = $("#selector").val();
        $('.outer').css('display', 'none');
        $('.text').css('display', 'none');
        outer = '.small';

if (zoom == 4) {
            outer = '.large';
        } else if (zoom == 3) {
            outer = '.medium';
        }
    });
});

/**
 * Get the background image based on zoom.
 */
function getOuterClass(zoom) {
    var outer = '.small';

if (zoom == 4) {
        outer = '.large';
    } else if (zoom == 3) {
        outer = '.medium';
    }
    return outer;
}

编译

CSS

body {
    background-color: #212119;
    margin: 0;
}
#selector {
    border: 5px solid #aaa;
    padding: 3px 10px;
    margin-right: 20px;
    margin-top: 20px;
    position: absolute;
    right: 0;
    z-index: 100;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 5px 0 #000;
    -webkit-box-shadow: 0 0 5px 0 #000;
    box-shadow: 0 0 5px 0 #000;
}
.wrapper {
    height: 679px;
    position: relative;
    width: 1000px;
}
.outer {
    border: 5px solid #aaa;
    height: 200px;
    margin-left: 30px;
    margin-top: 30px;
    position: absolute;
    width: 200px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.5);
}
.large {
    background: url("http://bryanjones.us/sites/default/files/nebula2.jpg") no-repeat #212119;
    display: none;
}
.medium {
    background: url("http://bryanjones.us/sites/default/files/nebula2x3.jpg") no-repeat #212119;
    display: none;
}
.small {
    background: url("http://bryanjones.us/sites/default/files/nebula2x2.jpg") no-repeat #212119;
    display: none;
}
.text {
    background-color: #555;
    border: 2px solid #aaa;
    color: #fff;
    display: none;
    font-weight: bold;
    height: 90px;
    margin-left: 30px;
    margin-top: 30px;
    padding: 8px;
    position: absolute;
    width: 90px;
    -moz-border-radius: 30% 0 0 0;
    -webkit-border-radius: 30%;
    border-radius: 30% 0 0 0;
}
.glass {
    background-color: transparent;
    cursor: none;
    height: inherit;
    position: relative;
    width: 100%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);
    -webkit-box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);
    box-shadow: inset -20px 0 40px 0px rgba(255, 255, 255, 0.25);
    -moz-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    -webkit-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

HTML

Universe Zoom 使用4张不同大小的图，改变放大镜的背景图达到缩放的视觉效果。这个方法视觉效果比CSS3的scale变换要好，但是性能差。

HTML5, magnifier, zoom

编辑器支持Emmet

快捷键

Universe Zoom 使用4张不同大小的图，改变放大镜的背景图达到缩放的视觉效果。这个方法视觉效果比CSS3的scale变换要好，但是性能差。

HTML5, magnifier, zoom

HTML5使用Polyrize.js轻松实现图像的多边形化特效

使用HTML5 Audio API（AudioContext）实现的DJ划拨碟片音效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：