移动端手指移动缩放图片,精准对点缩放，深度解读anlinmb函数代码

最新推荐文章于 2023-06-30 17:53:12 发布

qq_1737307825

最新推荐文章于 2023-06-30 17:53:12 发布

阅读量734

点赞数

分类专栏：手指缩放图片文章标签： jquery js html

本文链接：https://blog.csdn.net/qq_42879169/article/details/119647888

版权

本文介绍了如何在移动端实现手指移动缩放图片，并重点解析了anlinmb.js函数库，该库能确保图片以两指中心点为基准精准缩放。文章详细阐述了禁用双指缩放的代码以及利用transform-origin和scale进行定位缩放的关键实现。

摘要由CSDN通过智能技术生成

最近一个问题困扰了好几天，想找一个手机端的网页图片预览手指缩放插件，百度了一圈都是不完整的代码，要么就是一个很大的问题：不能根据两根手指中间的图片像素点为中心进行放大和缩小操作，功夫不负有心人，几乎搜便的全网找出来这么一个插件函数库:anlinmb.js
它完美的解决了这个的问题
在这里插入图片描述
它究竟是怎么实现的呢？完整的将它的函数代码扒出来
其中涉及到很多细节如下：
1：在使用手势事件时必须禁止手机页面浏览器的双指缩放，代码如下

document.body.addEventListener('touchmove', function(event) {
   
 if (event.touches.length > 1) {
   
 event.preventDefault();
 }
 }, {
   passive: false});

2：关键代码的实现：根据css属性：transform-origin和scale来进行定位缩放，完整代码如下
css部分：

<style>
.qjk{
     z-index:2000;
	background-color:rgba(0,0,0,.7);
	position:fixed;left:0; right:0; top:0; bottom:0;
margin:0 auto;max-width:100%;overflow:auto;height:100%;}

.juzon{
     position:absolute;left:50%;top:50%;
transform:translate(-50%,-50%);width:100%;max-height:100%;}
.xxx{
     margin-right:5px;float:left;display:flex;align-items: center;text-align:center; justify-content: center;font-size:100%;font-weight: bold;background:rgba(255,255,255,.56);}
.anlin-l{
     position:fixed;height:55px;line-height:55px;font-size:200%;text-shadow: 1px 1px 5px #000;color:#fff;width:55px;text-align:center;z-index:2100;}</style>

完整的js代码，复制就可以用

var anlin={
   };
anlin.imu=function(t){
   

if(typeof $('#anlin-scale')[0]!='undefined'){
   
$('#anlin-scale').remove();
$(window).scrollTop(anlin.bodyScroll);
//return false;
}
anlin.bodyScroll=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
   

$('body').css({
   "overflow":"hidden","position":"fixed","left":0,"right":0,"top" : -anlin.bodyScroll});

$("body").append('<div id="anlin-scale" class="qjk" style="overflow:hidden;"><div class="anlin-l dian" id="anlin-l1" style="top:0;left:0;font-size:150%;" οnclick="$(this).hide().next().show().parent().css(\'overflow\',\'auto\');$(\'#anlin-l2\').show();anlin.tou=1;alert(\'已开启图片阅读模式,关闭拖拽\');">N</div><div class="anlin-l dian" id="anlin-l2" οnclick="$(this).hide().parent().css(\'overflow\',\'hidden\');$(\'#anlin-l1\').show();anlin.tou=2;alert(\'已关闭图片阅读模式,开启拖拽\');" style="display:none;top:0;left:0;font-size:150%;">F</div><div id="anlinx" class="anlin-l dian" style="top:0;right:0;" οnclick="$(this).parent().remove();$(\'body\').css({\'overflow\':\'\',\'position\':\'\'});$(window).scrollTop(anlin.bodyScroll);">×</div><div id="anlinx" class="anlin-l dian" style="left:100px;font-size:150%;" οnclick="anlin.imu($(\'#anlinimg\')[0]);">↻</div><div class="juzo