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移動端觸摸圖片放大，非常實用的案例

網站前端樣式代碼

您的項目需求