标签：javascript math css3 zoom image-zoom

我正在尝试实现图像缩放效果,有点像缩放如何使用谷歌地图,但有一个固定位置图像的网格.

我上传了迄今为止我所拥有的一个例子：

http://www.dominicpettifer.co.uk/Files/MosaicZoom.html

(使用CSS3转换,因此仅适用于Firefox,Opera,Chrome或Safari)

使用鼠标滚轮放大/缩小. HTML源代码基本上是带有内部div的外部div,而内部div包含使用绝对位置排列的16个图像.它基本上是一个照片马赛克.

我使用CSS3转换使缩放位工作：

$(this).find('div').css('-moz-transform', 'scale(' + scale + ')');

…但是,我依靠外部div上的鼠标X / Y位置来放大鼠标光标所在的位置,类似于Google Maps的功能.问题是,如果您直接放大图像,将光标移动到左下角并再次缩放,而不是缩放到图像的左下角,它会缩放到整个马赛克的底部/左侧.当你在移动鼠标时稍微放大一点,即使是轻微的,也会产生跳跃在马赛克周围的效果.

这基本上就是问题,我希望缩放的工作方式与谷歌地图完全一样,它可以缩放到鼠标光标位置的位置,但是我不能理解数学来计算变换原点：正确的X / Y值.请帮忙,现在已经坚持了3天.

以下是鼠标滚轮事件的完整代码清单：

var scale = 1;

$("#mosaicContainer").mousewheel(function(e, delta)
{
    if (delta > 0)
    {
        scale += 1;
    }
    else
    {
        scale -= 1;
    }
    scale = scale < 1 ? 1 : (scale > 40 ? 40 : scale);

    var x = e.pageX - $(this).offset().left;
    var y = e.pageY - $(this).offset().top;

    $(this).find('div').css('-moz-transform', 'scale(' + scale + ')')
        .css('-moz-transform-origin', x + 'px ' + y + 'px');

    return false;
});

解决方法:

终于弄明白了,请在这里查看：

http://www.dominicpettifer.co.uk/Files/Mosaic/MosaicTest.html

使用鼠标滚轮进行缩放,您也可以拖动图像,只能在最新的Safari,Opera和Firefox上正常工作(出于某种原因,Chrome上的图像模糊不清).某些地区还有点儿车.在DocType http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example上得到了很多帮助

标签：javascript,math,css3,zoom,image-zoom
来源： https://codeday.me/bug/20190710/1422616.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。