基于jquery的图片预览插件的封装

最新推荐文章于 2025-06-15 10:05:14 发布

原创最新推荐文章于 2025-06-15 10:05:14 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

博客介绍了基于jQuery的图片预览插件的封装。操作时，先将代码存为js文件，再在页面先后引入jQuery和该js文件，在需图片预览的元素里加入imgviewer类并添加自定义属性data - img绑定图片url。插件支持预览、拖动及放大缩小。

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

基于jquery的图片预览插件的封装

操作指南：
1、将下列代码copy存为js文件；
2、在页面先后引入jquery和保存的js文件；
3、在与需要用到图片预览的元素里面加入imgviewer class(如有需要可自行修改)，同时添加一个自定义属性data-img（data-img必须绑定需要预览的图片的url；

该插件仅支持预览、拖动及放大缩小

js部分
$(function () {
    // 地图缩放、拖动
    var store = {
        scale: 1
    };
    var position_top, position_left, pageX, pageY;
    // 查看地图
    $('body').on('click', '.imgviewer', function () {
        var img = $(this).data('img') || $(this).attr('src');
        var html = `
        <div class="imgviewer-wrapper">
            <img class="imgviewer-img" src="${img}"/>
            <div style="color:white">xxx提供技术支持<div>
        </div>`;
        $('body').append(html);
        $('.imgviewer-wrapper').on('touchstart', '.imgviewer-img', function (event) {
            event.preventDefault();
            var touches = event.touches;
            var events = touches[0];//单指
            var events2 = touches[1];//双指
            if (touches.length == 1) {   //单指操作
                pageX = Number(events.pageX);
                pageY = Number(events.pageY);
                store.moveable = true;
                var _obj = $('.imgviewer-img');
                //  .css获取的值是字符串
                position_left = parseFloat(_obj.css('left').split('px'));
                position_top = parseFloat(_obj.css('top').split('px'));
    
            } else {
                // 第一个触摸点的坐标
                store.pageX = events.pageX;
                store.pageY = events.pageY;
                store.moveable = true;
                if (events2) {
                    store.pageX2 = events2.pageX;
                    store.pageY2 = events2.pageY;
                }
                store.originScale = store.scale || 1;
            }
        });
        //开始移动
        $('.imgviewer-wrapper').on('touchmove','.imgviewer-img', function (event) {
            event.preventDefault();
            if (!store.moveable) {
                return;
            }
            var touches = event.touches;
            var events = touches[0];
            var events2 = touches[1];
            if (touches.length == 1) {
                var pageX2 = Number(events.pageX);
                var pageY2 = Number(events.pageY);
                //控制图片移动
                $('.imgviewer-img').css({
                    'top': position_top + pageY2 - pageY + 'px',
                    "left": position_left + pageX2 - pageX + 'px'
                })
            } else {
                // 双指移动
                if (events2) {
                    // 第2个指头坐标在touchmove时候获取
                    if (!store.pageX2) {
                        store.pageX2 = events2.pageX;
                    }
                    if (!store.pageY2) {
                        store.pageY2 = events2.pageY;
                    }
    
                    // 获取坐标之间的距离
                    var getDistance = function (start, stop) {
                        //三角函数
                        return Math.hypot(stop.x - start.x,
                            stop.y - start.y);
                    };
                    // 双指缩放比例计算
                    var zoom = getDistance({
                        x: events.pageX,
                        y: events.pageY
                    }, {
                        x: events2.pageX,
                        y: events2.pageY
                    }) / getDistance({
                        x: store.pageX,
                        y: store.pageY
                    }, {
                        x: store.pageX2,
                        y: store.pageY2
                    });
    
                    var newScale = store.originScale * zoom;
                    // 缩放比例限制
                    if (newScale > 3) {
                        newScale = 3;
                    } else if (newScale < 1) {
                        newScale = 1;
                    }
                    store.scale = newScale;
                    // 缩放效果
                    $('.imgviewer-img')[0].style.transform = 'scale('
                        + newScale + ')';
                }
            }
        });
    });
    $('body').on('click', '.imgviewer-wrapper', function () {
        $(this).remove();
    });
});