JS实现放大镜功能，鼠标经过一个图片，放大显示

最新推荐文章于 2022-12-20 17:30:40 发布

置顶 fanzijie112

最新推荐文章于 2022-12-20 17:30:40 发布

阅读量982

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/fanzijie112/article/details/8350147

这段代码展示了如何使用JavaScript创建一个图片放大镜功能。当鼠标经过图片时，会在旁边显示一个放大区域，实时展示鼠标位置下的图像细节。通过标准化事件处理、鼠标位置获取、元素样式设置以及透明度调整等技术实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

            return { 'x': x, 'y': y };
        }
        function setOpacity(elem, level) {   //兼容浏览器设置透明值
            if (elem.filters) {
                elem.style.filter = 'alpha(opacity=' + level * 100 + ')';
            } else {
                elem.style.opacity = level;
            }
        }
        function css(elem, prop) {    //css设置函数,可以方便设置css值,并且兼容设置透明值
            for (var i in prop) {
                if (i == 'opacity') {
                    setOpacity(elem, prop[i]);
                } else {
                    elem.style[i] = prop[i];
                }
            }
            return elem;
        }
        var magnifier = {
            m: null,

            init: function(magni) {
                var m = this.m = magni || {
                    cont: null, //装载原始图像的div
                    img: null,   //放大的图像
                    mag: null,   //放大框
                    scale: 15   //比例值,设置的值越大放大越大,但是这里有个问题就是如果不可以整除时,会产生些很小的白边,目前不知道如何解决
                }

                css(m.img, {
                    'position': 'absolute',
                    'width': (m.cont.clientWidth * m.scale) + 50 + 'px',    //原始图像的宽*比例值
                    'height': (m.cont.clientHeight * m.scale) + 50 + 'px'    //原始图像的高*比例值
                })

                css(m.mag, {
                    'display': 'none',
                    'width': m.cont.clientWidth + 50 + 'px',   //m.cont为原始图像,与原始图像等宽
                    'height': m.cont.clientHeight +50 + 'px',
                    'position': 'absolute',
                    'left': m.cont.offsetLeft + m.cont.offsetWidth + 50 + 'px', //放大框的位置为原始图像的右方远10px
                    'top': m.cont.offsetTop + 'px'
                })

var borderWid = m.cont.getElementsByTagName('div')[0].offsetWidth - m.cont.getElementsByTagName('div')[0].clientWidth; //获取border的宽

                css(m.cont.getElementsByTagName('div')[0], {   //m.cont.getElementsByTagName('div')[0]为浏览框
                    'display': 'none',        //开始设置为不可见
                    'width': m.cont.clientWidth / m.scale - borderWid + 'px',   //原始图片的宽/比例值 - border的宽度
                    'height': m.cont.clientHeight / m.scale - borderWid + 'px', //原始图片的高/比例值 - border的宽度
                    'opacity': 0.5     //设置透明度
                })

m.img.src = m.cont.getElementsByTagName('img')[0].src; //让原始图像的src值给予放大图像
m.cont.style.cursor = 'crosshair';

m.cont.onmouseover = magnifier.start;

start: function(e) {

                if (document.all) {    //只在IE下执行,主要避免IE6的select无法覆盖
                    magnifier.createIframe(magnifier.m.img);
                }

                this.onmousemove = magnifier.move; //this指向m.cont
                this.onmouseout = magnifier.end;
            },

move: function(e) {
var pos = getPointerPosition(e); //事件标准化

this.getElementsByTagName('div')[0].style.display = '';

                css(this.getElementsByTagName('div')[0], {
                    'top': Math.min(Math.max(pos.y - this.offsetTop - parseInt(this.getElementsByTagName('div')[0].style.height) / 2, 0), this.clientHeight - this.getElementsByTagName('div')[0].offsetHeight) + 'px',
                    'left': Math.min(Math.max(pos.x - this.offsetLeft - parseInt(this.getElementsByTagName('div')[0].style.width) / 2, 0), this.clientWidth - this.getElementsByTagName('div')[0].offsetWidth) + 'px'   //left=鼠标x - this.offsetLeft - 浏览框宽/2,Math.max和Math.min让浏览框不会超出图像
                })

magnifier.m.mag.style.display = '';

                css(magnifier.m.img, {
                    'top': -(parseInt(this.getElementsByTagName('div')[0].style.top) * magnifier.m.scale) + 'px',
                    'left': -(parseInt(this.getElementsByTagName('div')[0].style.left) * magnifier.m.scale) + 'px'
                })

            end: function(e) {
                this.getElementsByTagName('div')[0].style.display = 'none';
                magnifier.removeIframe(magnifier.m.img); //销毁iframe

magnifier.m.mag.style.display = 'none';
},

            createIframe: function(elem) {
                var layer = document.createElement('iframe');
                layer.tabIndex = '-1';
                layer.src = 'javascript:false;';
                elem.parentNode.appendChild(layer);

                layer.style.width = elem.offsetWidth + 'px';
                layer.style.height = elem.offsetHeight + 'px';
            },

            removeIframe: function(elem) {
                var layers = elem.parentNode.getElementsByTagName('iframe');
                while (layers.length > 0) {
                    layers[0].parentNode.removeChild(layers[0]);
                }
            }
        }

    window.onload = function()
{
          magnifier.init({
             cont: document.getElementById('magnifier'),
             img: document.getElementById('magnifierImg'),
           mag: document.getElementById('mag'),
             scale: 3
         });
     }
    </script>

</div>
<div id="mag" style="display:none;">
<img id="magnifierImg" />

</div>