HTML5移动端触摸图片放大，非常实用的案例

多特效代码请添加HTML5前端交流群581549454

废话不多说上代码！

网站前端样式代码

<!DOCTYPE html>

<html>

<head>

<title>jQuery手机微信端手指触摸图片放大代码</title>

/* styles unrelated to zoom */

* { border:0; margin:0; padding:0; }

p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}

/* these styles are for the demo, but are not required for the plugin */

.zoom {

display:inline-block;

position: relative;

}

/* magnifying glass icon */

.zoom:after {

content:'';

display:block;

width:33px;

height:33px;

position:absolute;

top:0;

right:0;

background:url(img/icon.png);

}

.zoom img {

display: block;

}

.zoom img::selection { background-color: transparent; }

#ex2 img:hover { cursor: url(img/grab.cur), default; }

#ex2 img:active { cursor: url(img/grabbed.cur), default; }

</style>

</head>

<body>

<div>

<p>Hover</p>

</span>

</span>

<p>Click to activate</p>

</span>

<p>Click to toggle</p>

</span>

</div>

$(document).ready(function(){

$('#ex1').zoom();

$('#ex2').zoom({ on:'grab' });

$('#ex3').zoom({ on:'click' });

$('#ex4').zoom({ on:'toggle' });

});

</script>

</body>

</html>

作放大镜，首先必须要掌握常见的六大尺寸值。如果这六个值不太熟悉的话，可能有点吃力，不过下图已经分析的很清楚了，应该能看懂。需要注意的一点是，除了鼠标位置是按照窗口来进行定位的，如图绿色画线，其他四项尺寸值是按照父元素——子元素关系来计算尺寸，如body和div1，div1和div2 。

offsetLeft和style.left主要有三点不同：

现在来分析：当放大镜（鼠标）在小图片上移动 x 距离时，大图片移动的距离Y是多少呢？

其实根据等比关系，有图中的关系：

下图中关系式，其实就是由核心公式转化而来：X/?=B/D=A/C.

（为了方便，只讨论单方向和横轴方向距离）

X:放大镜向左移动的距离；

?：大图片向右（反方向）移动的距离；

A：放大镜的宽；

B：小容器的宽，为了兼容，实际为mark的宽，不过与小容器宽相等的；

C：大容器的宽；

D：大图片的宽；

图中数字代表距离，则x的值应该如下计算：

上面就是放大镜核心原理。明白了原理后，对于放大镜的移动范围，浏览器的兼容性等细节再进行优化可以咯。

代码还是要贴上来的：

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <title>放大镜</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }
 // 最外层，包裹所有元素
 #demo {
 display: block;
 width: 400px;
 height: 255px;
 margin: 50px;
 position: relative;
 border: 1px solid #ccc;
 }
 // 小容器
 #small-box {
 position: relative;
 z-index: 1;
 }
 // 放大镜
 #float-box {
 display: none;
 width: 160px;
 height: 120px;
 position: absolute;
 background: #ffffcc;
 border: 1px solid #ccc;
 filter: alpha(opacity=50);
 opacity: 0.5;
 }
 // 为了兼容IE，把添加在小图片的特性全部移到mark
 #mark {
 position: absolute;
 display: block;
 width: 400px;
 height: 255px;
 background-color: #fff;
 filter: alpha(opacity=0);
 opacity: 0;
 z-index: 10;
 }
 // 大容器
 #big-box {
 display: none;
 position: absolute;
 top: 0;
 left: 460px;
 width: 400px;
 height: 300px;
 overflow: hidden;
 border: 1px solid #ccc;
 z-index: 1;
 ;
 }
 // 大图片
 #big-box img {
 position: absolute;
 z-index: 5
 }
 </style>
 <script>
 //页面加载完毕后执行
 window.onload = function() {
 var objDemo = document.getElementById("demo");
 var objSmallBox = document.getElementById("small-box");
 var objMark = document.getElementById("mark");
 var objFloatBox = document.getElementById("float-box");
 var objBigBox = document.getElementById("big-box");
 var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
 // 鼠标移入时触发的事件
 objMark.onmouseover = function() {
 objFloatBox.style.display = "block"
 objBigBox.style.display = "block"
 }
 // 鼠标离开时触发的事件
 objMark.onmouseout = function() {
 objFloatBox.style.display = "none"
 objBigBox.style.display = "none"
 }
 // 鼠标在小图片上移动时触发的事件
 objMark.onmousemove = function(ev) {
 // 兼容浏览器
 var _event = ev || window.event; 
 // 鼠标移动的 变化距离
 var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
 var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
 // 把放大镜限制在小容器内
 if (left < 0) {
 left = 0;
 } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
 left = objMark.offsetWidth - objFloatBox.offsetWidth;
 }
 if (top < 0) {
 top = 0;
 } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
 top = objMark.offsetHeight - objFloatBox.offsetHeight;
 }
 //放大镜跟随鼠标发生移动后的当前位置
 objFloatBox.style.left = left + "px";
 objFloatBox.style.top = top + "px";
 //发生移动后，产生的 等比例 关系。
 var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
 var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
 //利用等比例关系计算 大图片 反向 移动的距离
 objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
 objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
 }
 }
 </script>
</head>
<body>
 <div id="demo">
 <div id="small-box">
 <div id="mark"></div>
 <div id="float-box"></div>
 <img src="macbook-small.jpg" /> // 这张是小图片。
 </div>
 <div id="big-box">
 <img src="macbook-big.jpg" /> // 这张是大图片。
 </div>
 </div>
</body>
</html>

这张是小图片，可以下载后置于源码中使用。

这张是大图片，可以下载后置于源码中使用。

关软件:

1.mutool 工具 : 免费开源PDF批处理工具,可转PDF至文本/图片/HTML网页

MuPDFmupdf.com/index.html

备选:可用其他:如福昕/Abbyy FineReader/万兴PDF/PDFXCview来提取
还有一种方案为: 先用Calibre工具转换PDF成ZIP格式,然后解压成图片
小型PDF文档,直接用Word或WPS打开另存为Html,或在线网页转换也可.

2.img2html 工具 : 批量转换图片->Html网页工具 百度网盘提取码: 84gf

https://pan.baidu.com/s/1pK8oN21JRbrKQSNxbBXPqgpan.baidu.com/s/1pK8oN21JRbrKQSNxbBXPqg

备选:也可自己写python脚本来生成网页,如果简单可直接写成一个批处理

具体流程:

1.使用mutool工具转换pdf文档,生成每页一个图片

2.使用img2html批处理脚本生成简单的index网页

3.在SuperMemo中导入网页,按分割符号Split分割

4.使用Alt+X图片提取,截图识别进行文本内容提取

说明及使用:

以下为mutool工具常见的一些使用命令,非常简单,但功能丰富,灵活,软件开源/速度快/无限制.

mutool工具常见使用案例

PDF文档文本增量

如果只是简单的提取PDF文件内的文本,不含图片,用上面第二条命令,指定-F txt 即可,也可以直接-F html 不加 -O preserve-images 参数即可.

mutool draw -F txt file.pdf 2,3,6-20 后面的数字是转换的页码范围,不加的话默认转换所有
mutool convert -F html -o outfile_name%d.html file.pdf 不加 -O preserve-images 参数

1.使用mutool工具转换pdf到图片,比较轻量/而且免费,具体可以到下图所示的官网下载:

https://www.mupdf.com/index.htmlwww.mupdf.com/index.html

下载客户端工具使用这个链接下载

下载后解压出如下, 我们只需拷贝其中的一个mutool.exe文件至C:\Windows\System32即可

拷贝工具至C盘路径

打开cmd窗口,只执行mutool命令如下(具体的帮助可查看如下官网链接),即代表工具安装正常:

https://mupdf.com/docs/index.htmlmupdf.com/docs/index.html

命令行输入mutool命令

PDF转换操作: cmd下进入磁盘指定目录(图片会生成在这,不建议C盘)后执行如下脚本并回车:

方法一:

如下命令指定了PDF文件输出格式,输出为带页码的图片,要进行PDF转换页码为1,3,4,5-12页

mutool convert -F png -o myfile-%d.png ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12

方法二:

mutool draw -F png -o myfile-%d.png ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12
mutool convert -F cbz -o my_zip_file.cbz ./轻松Scrum之旅.pdf(全文路径) 1,3,4,5-12

方法三:

使用mutool run javascript文件

在本文中我们只用方法一来实现,具体步骤如下:

单PDF转换成多图片

稍等一会我们即可在Windows窗口中看到转换后的图片如下,注意:命令行取消操作则按Ctrl+C

图片提取成功的界面

2.使用img2html工具转换多个图片至html,上面提供下载的是一个批处理,具体你可自己修改:

图片生成网页批处理脚本内容

把bat文件放置于以上图片同一目录,双击执行即可,过一会可看到生成一个index.html文件如下:

放置于图片目录双击img2html生成网页内容如上,可用IE打开

3.在SuperMemo中导入网页,按分割符号Split分割,生成多个子元素主题,具体操作如下:

拷贝所有文件(index.html,所有图片)至多媒体文件夹,具体路径在option选项中下的elements:

用IE浏览器打开index.html,在supermemo中快捷键ctrl+shift+a导入IE中打开的网页如下:

快捷键ctrl+enter打开命令窗口,输入split选首项分割(分割符号即上面我们批处理中设置的):

输入split分割命令选择按自定义分割输入批处理中的分割符如上图:最终分割成了每个图片一个子element元素

4.添加学习计划并对新元素进行增量学习和提取,图片提取使用alt+x , 文字提取使用OCR工具

分支视图中添加学习元素分支视图中开始学习内容

1.图片内容的提取

快捷键Ctrl+F8下载并插入成图片组件alt+左键单击右侧图片组件进行操作

如上图,alt+左键点击,边框变成绿色时即可提取,鼠标中键双击放大,加shift中键双击缩小,鼠标框选释放后alt+x提取,unzoom重置缩放,重置后可再次提取.生成的图片会成为当前元素子元素

提取内容结果如下: (提示:你也可以直接用Ctrl+Shift+M使用预定义模版来批量改变内容样式)

删除内容图片,并添加内容(相关笔记)

2.文本内容的提取

因为针对PDF导入并分割的是图片,因此我们要使用OCR工具进行文本内容提取(任何一个可以截图识文的工具都可以)如quicker/itext/abbyy等,接着只添加一个子元素并粘贴识别内容即可:

使用OCR工具识图并粘贴到新建子元素

我是一只热爱学习的小胖子,如果你也热爱学习,并且对SuperMemo感兴趣,欢迎转发和评论!

在线咨询

上一篇：XML 和 HTML 比较：你应该知道的主要区别
下一篇：前端：六大H5常用结构元素

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5移动端触摸图片放大，非常实用的案例

网站前端样式代码

您的项目需求