整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
多特效代碼請?zhí)砑親TML5前端交流群581549454
廢話不多說上代碼！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手機微信端手指觸摸圖片放大代碼</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* 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>
<span id='ex1'>
<img src='img/design.jpg' width='555' height='320' alt='web design'>
<p>Hover</p>
</span>
<span id='ex2'>
<img src='img/women.jpg' width='290' height='320' alt='women'>
<p>Grab</p>
</span>
<span id='ex3'>
<img src='img/horse.jpg' width='555' height='320' alt='horse'>
<p>Click to activate</p>
</span>
<span id='ex4'>
<img src='img/women2.jpg' width='290' height='320' alt='women2'>
<p>Click to toggle</p>
</span>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.zoom.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</body>
</html>
作放大鏡，首先必須要掌握常見的六大尺寸值。如果這六個值不太熟悉的話，可能有點吃力，不過下圖已經(jīng)分析的很清楚了，應(yīng)該能看懂。需要注意的一點是，除了鼠標(biāo)位置是按照窗口來進行定位的，如圖綠色畫線，其他四項尺寸值是按照父元素——子元素關(guān)系來計算尺寸，如body和div1，div1和div2 。
offsetLeft和style.left主要有三點不同：
現(xiàn)在來分析：當(dāng)放大鏡（鼠標(biāo)）在小圖片上移動 x 距離時，大圖片移動的距離Y是多少呢？
其實根據(jù) 等比 關(guān)系，有圖中的關(guān)系：
下圖中關(guān)系式，其實就是由核心公式轉(zhuǎn)化而來：X/?=B/D=A/C.
（為了方便，只討論單方向和橫軸方向距離）
X:放大鏡向左移動的距離；
?：大圖片向右（反方向）移動的距離；
A：放大鏡的寬；
B：小容器的寬，為了兼容，實際為mark的寬，不過與小容器寬相等的；
C：大容器的寬；
D：大圖片的寬；
圖中數(shù)字代表距離，則x的值應(yīng)該如下計算：
上面就是放大鏡核心原理。明白了原理后，對于放大鏡的移動范圍，瀏覽器的兼容性等細節(jié)再進行優(yōu)化可以咯。
代碼還是要貼上來的：
<!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>
//頁面加載完畢后執(zhí)行
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];
// 鼠標(biāo)移入時觸發(fā)的事件
objMark.onmouseover = function() {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
// 鼠標(biāo)離開時觸發(fā)的事件
objMark.onmouseout = function() {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
}
// 鼠標(biāo)在小圖片上移動時觸發(fā)的事件
objMark.onmousemove = function(ev) {
// 兼容瀏覽器
var _event = ev || window.event;
// 鼠標(biāo)移動的 變化距離
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
// 把放大鏡限制在小容器內(nèi)
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;
}
//放大鏡跟隨鼠標(biāo)發(fā)生移動后的當(dāng)前位置
objFloatBox.style.left = left + "px";
objFloatBox.style.top = top + "px";
//發(fā)生移動后，產(chǎn)生的 等比例 關(guān)系。
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//利用等比例關(guān)系計算 大圖片 反向 移動的距離
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>
這張是小圖片，可以下載后置于源碼中使用。
這張是大圖片，可以下載后置于源碼中使用。
關(guān)軟件:
1.mutool 工具 : 免費開源PDF批處理工具,可轉(zhuǎn)PDF至文本/圖片/HTML網(wǎng)頁
備選:可用其他:如福昕/Abbyy FineReader/萬興PDF/PDFXCview來提取
還有一種方案為: 先用Calibre工具轉(zhuǎn)換PDF成ZIP格式,然后解壓成圖片
小型PDF文檔,直接用Word或WPS打開另存為Html,或在線網(wǎng)頁轉(zhuǎn)換也可.
2.img2html 工具 : 批量轉(zhuǎn)換圖片->Html網(wǎng)頁工具 百度網(wǎng)盤提取碼: 84gf
備選:也可自己寫python腳本來生成網(wǎng)頁,如果簡單可直接寫成一個批處理
具體流程:
1.使用mutool工具轉(zhuǎn)換pdf文檔,生成每頁一個圖片
2.使用img2html批處理腳本生成簡單的index網(wǎng)頁
3.在SuperMemo中導(dǎo)入網(wǎng)頁,按分割符號Split分割
4.使用Alt+X圖片提取,截圖識別進行文本內(nèi)容提取
說明及使用:
以下為mutool工具常見的一些使用命令,非常簡單,但功能豐富,靈活,軟件開源/速度快/無限制.
mutool工具常見使用案例
PDF文檔文本增量
如果只是簡單的提取PDF文件內(nèi)的文本,不含圖片,用上面第二條命令,指定-F txt 即可,也可以直接-F html 不加 -O preserve-images 參數(shù)即可.
mutool draw -F txt file.pdf 2,3,6-20 后面的數(shù)字是轉(zhuǎn)換的頁碼范圍,不加的話默認轉(zhuǎn)換所有
mutool convert -F html -o outfile_name%d.html file.pdf 不加 -O preserve-images 參數(shù)
1.使用mutool工具轉(zhuǎn)換pdf到圖片,比較輕量/而且免費,具體可以到下圖所示的官網(wǎng)下載:
下載客戶端工具使用這個鏈接下載
下載后解壓出如下, 我們只需拷貝其中的一個mutool.exe文件至C:\Windows\System32即可
拷貝工具至C盤路徑
打開cmd窗口,只執(zhí)行mutool命令如下(具體的幫助可查看如下官網(wǎng)鏈接),即代表工具安裝正常:
命令行輸入mutool命令
PDF轉(zhuǎn)換操作: cmd下進入磁盤指定目錄(圖片會生成在這,不建議C盤)后執(zhí)行如下腳本并回車:
方法一:
如下命令指定了PDF文件輸出格式,輸出為帶頁碼的圖片,要進行PDF轉(zhuǎn)換頁碼為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文件
在本文中我們只用方法一來實現(xiàn),具體步驟如下:
單PDF轉(zhuǎn)換成多圖片
稍等一會我們即可在Windows窗口中看到轉(zhuǎn)換后的圖片如下,注意:命令行取消操作則按Ctrl+C
圖片提取成功的界面
2.使用img2html工具轉(zhuǎn)換多個圖片至html,上面提供下載的是一個批處理,具體你可自己修改:
圖片生成網(wǎng)頁批處理腳本內(nèi)容
把bat文件放置于以上圖片同一目錄,雙擊執(zhí)行即可,過一會可看到生成一個index.html文件如下:
放置于圖片目錄雙擊img2html生成網(wǎng)頁內(nèi)容如上,可用IE打開
3.在SuperMemo中導(dǎo)入網(wǎng)頁,按分割符號Split分割,生成多個子元素主題,具體操作如下:
拷貝所有文件(index.html,所有圖片)至多媒體文件夾,具體路徑在option選項中下的elements:
用IE瀏覽器打開index.html,在supermemo中快捷鍵ctrl+shift+a導(dǎo)入IE中打開的網(wǎng)頁如下:
快捷鍵ctrl+enter打開命令窗口,輸入split選首項分割(分割符號即上面我們批處理中設(shè)置的):
輸入split分割命令選擇按自定義分割輸入批處理中的分割符如上圖:最終分割成了每個圖片一個子element元素
4.添加學(xué)習(xí)計劃并對新元素進行增量學(xué)習(xí)和提取,圖片提取使用alt+x , 文字提取使用OCR工具
分支視圖中添加學(xué)習(xí)元素分支視圖中開始學(xué)習(xí)內(nèi)容
1.圖片內(nèi)容的提取
快捷鍵Ctrl+F8下載并插入成圖片組件alt+左鍵單擊右側(cè)圖片組件進行操作
如上圖,alt+左鍵點擊,邊框變成綠色時即可提取,鼠標(biāo)中鍵雙擊放大,加shift中鍵雙擊縮小,鼠標(biāo)框選釋放后alt+x提取,unzoom重置縮放,重置后可再次提取.生成的圖片會成為當(dāng)前元素子元素
提取內(nèi)容結(jié)果如下: (提示:你也可以直接用Ctrl+Shift+M使用預(yù)定義模版來批量改變內(nèi)容樣式)
刪除內(nèi)容圖片,并添加內(nèi)容(相關(guān)筆記)
2.文本內(nèi)容的提取
因為針對PDF導(dǎo)入并分割的是圖片,因此我們要使用OCR工具進行文本內(nèi)容提取(任何一個可以截圖識文的工具都可以)如quicker/itext/abbyy等,接著只添加一個子元素并粘貼識別內(nèi)容即可:
使用OCR工具識圖并粘貼到新建子元素
我是一只熱愛學(xué)習(xí)的小胖子,如果你也熱愛學(xué)習(xí),并且對SuperMemo感興趣,歡迎轉(zhuǎn)發(fā)和評論!
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
