Magnifier笔记
生活随笔
收集整理的這篇文章主要介紹了
Magnifier笔记
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnifier</title>
<!--
20161109學習了一個jq寫放大鏡的demo。
需要注意的幾點：
1、在樣式設計上，浮動一定是所有的同級元素，比如下面結(jié)構(gòu)中的span按鈕和中間的包裹圖片的div盒子，一開始，我只給按鈕加了浮動，忘了中間包裹圖片的div，結(jié)果，你們知道的哈，我調(diào)試了半個小時……
2、還有一點是非常需要注意的，那就是下面的圖片大圖顯示區(qū)還有獲取局部圖片的盒子以及最終效果的放大鏡，說白了，就是三個盒子，他們的寬高必須是倍數(shù)的關系，不然最后你的放大鏡會出現(xiàn)放大偏移的bug。
3、沒了，暫時就是這些，視頻教學里，只是把代碼復制了一遍，也沒教這些實現(xiàn)的原理是怎樣的，蛋疼的我，研究了一下午，得出以下代碼注釋結(jié)論，如果你發(fā)現(xiàn)了錯誤，請來跟我交流哦。
-->
<style>
/*公共樣式：略*/
*{margin: 0;padding: 0;list-style: none;}
/*zoom：最外面的盒子，及父盒子，可以有可以沒有*/
.zoom{width: 800px;height: 700px;position: relative;margin: auto;}
/*zoomMin:這個命名其實給錯了，不想改了，他的意思是大圖展示區(qū)*/
.zoomMin{position: relative;width: 380px;height:380px;border: 1px solid indianred;margin-bottom: 3px; }
.zoomMin img{width: 100%;height: 380px;}
/*大圖展示區(qū)里的取圖片局部的“放大鏡”*/
.zoomMin .mask{width: 126px;height: 126px;background: red;opacity: 0.5;position: absolute;left: 0;top:0;display: none;}
/*zoomSmall：存放所有小圖的盒子*/
.zoomSmall{width: 380px}
/*里面還包含兩個按鈕*/
.zoomSmall span{cursor: pointer;float: left;width: 10px;height:60px;line-height: 60px;border-radius: 2px;background: #82878c; }
/*wrapSallImg：它被包含在zoomSmall里，是具體的備選小圖的集合容器*/
.wrapSallImg{width: 359px;overflow: hidden;margin-right:1px;float: left;/*因為兩個按鈕和他是同級別的，所以也要給浮動。*/}
.wrapSallImg ul{width:1450px;position: relative;/*這里最好是給這個relative相對定位，他表示被定位，但是還占位，使用absolute后，你可以試試……*/}
/*清浮動：略*/
.wrapSallImg ul:after{content: "";display: block;clear: both;}
.wrapSallImg ul li{cursor: pointer;float: left;width: 68px;height: 60px;border: 1px solid #ccc;margin: 0 1px; _display: inline;/*兼容ie6的margin問題*/}
.wrapSallImg>ul>li img{width: 100%;height: 60px;}
.wrapSallImg ul .action{border: 1px solid red; }
/*zoom_arge：最終的放大鏡就是這個了*/
.zoom_arge{width: 250px;height: 250px; border: 1px solid saddlebrown;position: absolute;top:0;
right:0;overflow: hidden;display: none;}
.zoom_arge img{height: 760px; width: 760px;position: absolute;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="zoom">
<div class="zoomMin">
<img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt="">
<div class="mask"></div>
</div>
<div class="zoomSmall">
<span class="leftBtn"><</span>
<div class="wrapSallImg">
<ul>
<li class="action"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102539zuxem000ump9z11m.jpg.thumb.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/10293325N-0.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/1029331950-4.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
</ul>
</div>
<span class="rightBtn">></span>
</div>
<div class="zoom_arge"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></div>
</div>
<input type="text" woshizidingyishuxing="用來測試你的各種運行值對不對的一個框">
</body>
<script>
var oZoomMin=$(".zoomMin");
var oZoomMinImg=$(".zoomMin img");
var aSmallImgUl=$(".wrapSallImg ul");
var aSmallImgLi=$(".wrapSallImg ul li");
var aSmallImLiWidth=aSmallImgLi.outerWidth(true);//true：這樣就把元素的邊框和margin或padding值都計算進來了。
var aSmallImgLiImgs=$(".wrapSallImg ul li img");
var oLbtn=$(".leftBtn");
var oRbtn=$(".rightBtn");
var now=0;/*計數(shù)器：等價于自定義的循環(huán)參數(shù) i 一樣的道理*/
$(function () {
aSmallImgLi.on("mouseover",function () {
$(this).addClass("action").siblings().removeClass("action");
/*1.aSmallImgLi：所有小圖集合；
* 2.添加鼠標移入事件mouseover
* 3.$(this)：等于是jq自動幫你循環(huán)遍歷了這個集合，而$(this)就是指當前被鼠標移入的小圖。
* 4.執(zhí)行結(jié)果：給當前觸發(fā)事件的元素添加一個class類名叫action，其他的兄弟們刪掉這個class類名。
* */
});
aSmallImgLiImgs.on("click",function () {
var aSmallImgLiImgSrc= $(this).attr("src");
oZoomMinImg.prop("src",aSmallImgLiImgSrc);
$(".zoom_arge img").prop("src",aSmallImgLiImgSrc);
/*1.上面是鼠標移入事件，那這個就時點擊事件，我叫他確認事件。選半天了，總得確認一個吧。
* 2.有所不同的是上面的是給li加的class，而這個是給包含在li里面的img做的事件哦
* 3.執(zhí)行結(jié)果：當你點擊小圖片后，會通過prop（）方法把你的attr屬性的值得到，然后賦給大圖展示區(qū)和放大鏡的最終盒子，前提是他們里面都要包含一個img來接收這個地址。
* 4.值得一提的是：attr（）和prop（）方法功能是一樣的，都是獲取元素的屬性的，這里的屬性不是指css樣式啊，這個不要搞混同學，css樣式要用css（）獲取。那么，老定義了，（“寫一個值就是獲取”，“寫兩個值就是改值，并且要用雙引號啊，不然就是變量了”）
* 好，基本功能是一樣的，但是，切記，這是最容易被忽略的芝士：attr可以獲取你自己定義的屬性，而prop只能是獲取到元素本身就有的屬性。自定義屬性：比如你這樣寫<input type='text' value='123' papapa='red'>
* 那么，這個input里的papapa=‘red’就是你自定義的屬性。一樣，通過arrt（）方法，你也可以動態(tài)的給元素添加自定義屬性
**/
});
oLbtn.on("click",function () {
if (now==0){
now=0;
}else {
now--;
aSmallImgUl.animate({"left":"+="+aSmallImLiWidth},500);
}
/*1.我的天啊，這里是我一開始最頭痛的地方，這到底是為了什么，難死爸爸了。不過認真的分析后，嗨，太簡單了。
* 2.事件：左按鈕被點擊了。
* 3.然后進入判斷
* 4.我們的計數(shù)器now初始化值就是0，所以第一個條件成立，如果這時候你點擊左按鈕，他會不鳥你，原因就在于，人家在第一次判斷中勝利了。這也是我們想要的結(jié)果，如果還不太明白，你可以把else里的語句拿到if判斷外面點擊一下左按鈕，就會幡然醒悟。
* 5.其實關鍵的在于計數(shù)器now--：在事件外面的計數(shù)器now初始值是0，那么作為全局變量的它很微妙，在你點擊右鍵的時候，他其實被賦值為+1了，這個其實就相當于我們使用的for循環(huán)，這個計數(shù)器就相當于 i ,這也是js的一個非常方便的機制，全局變量可以共享函數(shù)里的值，甚至被傳入其他函數(shù)中。
* 6.那么當我們通過點擊右鍵給計數(shù)器賦值成為1后，那么你再點擊左按鈕，哎？對了，第一個判斷語句不會生效了，那么好的，執(zhí)行else語句吧。這里計數(shù)器--，就是now=now-1；這樣1-1后又是0了，你再點擊，好的，第一天判斷生效，就不給你執(zhí)行下面的語句了。這，就是實現(xiàn)思路。
* 7.關于“+=”，看過相關教程的應該都知道，就是讓值累加，這樣才能實現(xiàn)點一個走一個，不然，只會原地踏步。
* */
});
oRbtn.on("click",function () {
if (now==3){
now=3;
}else {
now++;
aSmallImgUl.animate({"left":-now*aSmallImLiWidth},500)
}
/*由上面的邏輯，同樣， 你可以推算出這個右按鈕的執(zhí)行邏輯。
* 這個參數(shù)3指的是被隱藏的那3個圖片的下標
* */
});
oZoomMin.on("mousemove",function (e) {
$(".zoom_arge").show(); //當大圖展示區(qū)被鼠標移入的時候，我們就讓放大鏡區(qū)顯示
var oZoomMinOffset=$(this).offset(); //這里有很多算法，數(shù)學不好的我，真是相當?shù)牡疤郯?#xff0c;不過，我們可以一點一點的推算，這，到底是為了什么？
var X=e.pageX-oZoomMinOffset.left - $(".mask").width()/2;
var Y=e.pageY-oZoomMinOffset.top - $(".mask").height()/2;
/*1.首先是獲取：聲明一個變量來接收大圖展示區(qū)$(this)的offset（）方法。這個方法里裝著兩個值offset().left和offset().top;
* 簡單解釋一下這是什么值哈：就是距離文檔的位置，譬如：div在body里，那么他的文檔距離就是他自己的margin或者padding，如果div里有一個p表情，那他的距離就是距離的div的，跟body甚至document都沒有關系了。
* 2.ok，獲取了之后呢就要賦值了，首先，我們要獲取到鼠標移動的坐標，函數(shù)（e）,然后e.pageX,不清楚的百度哈，這個很簡單了，就是鼠標的值，然后
* 這個值要進過一系列的計算，按照運算規(guī)則，應該是先計算最后面那個除以2，好，我們就先來看這個除以2.
* a.$(".mask")是我們局部圖片的拾取器，他的寬除以2還剩下一半的寬，我們只需要記住，這樣寫，是為了，讓鼠標移動到拾取器盒子的中間才會開始帶著拾取器去“漫游”，你可以先把我這除以二去掉看看執(zhí)行結(jié)果。
* b.那么剩下的就是大圖展示區(qū)距離文檔的距離 - 去了還剩一半尺寸的拾取器，最后他們兩剪完的數(shù)值還被鼠標的數(shù)值給減去了，好吧，我都不想寫注釋了，但，做人就要做到底。
* c.鼠標距離是指在當前這個元素的整個尺寸上，我們鼠標所在的坐標位置，它同樣具備橫向和縱向，他的left就是X，top就是Y，那么他減去當前元素距離文檔的距離得出的是這個鼠標所在的真實位置；
* d.這樣說你可能不明白，你可以做一個例子，如果，你的這個div就是貼在左上角的，沒有margin和padding，手欠的你還寫了*{margin:0;padding:0};那么offset()這個值就可以不用寫了，不信，你可以試試，在這種情況下
* 你把offset()去掉，當然也就不用減去oZoomMinOffset.left了，這時候，你會發(fā)現(xiàn)，我擦，居然也可以啊。但是，記住，但是，如果你給div，這div就是指最外面那個大盒子了，如果你給他了margin或者padding，嘿嘿，自己體驗吧。
* */
if (X<=0){
X=0;
}else if (X>=oZoomMin.width()-$(".mask").width()){
X=oZoomMin.width()-$(".mask").width()
}
if (Y<=0){
Y=0;
}else if (Y>=oZoomMin.height()-$(".mask").height()){
Y=oZoomMin.height()-$(".mask").height()
}
/*1.判斷條件一的功能是讓我們的拾取器不會超過父盒子可視區(qū)；
* 2.首先還是判斷，如果X的值等于0，那好我們就讓她等于0；下面的不執(zhí)行
* 3.如果不等于0；那么看看是是不是大于或者等于這個值呢？
* 4.重點來了，這個值是干嘛的，首先：oZoomMin我們的大圖展示區(qū)，他的寬減去拾取器的寬，還減去他的高度，就等于是在他身上挖去一塊拾取器大小的尺寸。
* 5.這個尺寸干嘛用啊？看下面；
* /
/*比例尺*/
var percentageX=X/(oZoomMin.width()-$(".mask").width());
var percentageY=Y/(oZoomMin.height()-$(".mask").height());
/*這個東西叫比例尺
* 它是什么呢他就是經(jīng)過上面判斷出來的那剩下的一大塊尺寸然后呢除以了大圖展示區(qū)減去拾取器的尺寸，哎？這不就是自己除以自己嘛？對啊，1/1=1吧；2/2=1吧，3/3=1吧；
* 比例尺，要的，就是這個1等1的比例如果你像把比例放大，即做到放大更多倍數(shù)的話，就把比例加大就好了，當然，那樣會顯示的很怪異，建議不要做。
* */
$("input").val(percentageX+"and"+percentageY);//顯示我們比例尺的
$(".zoom_arge img").css({
"left":-percentageX*($(".zoom_arge img").width()-$(".zoom_arge").width())+"px",
"top":-percentageY*($(".zoom_arge img").height()-$(".zoom_arge").height())+"px"
});
/*1.最終的這個放大鏡展示區(qū)，就是用比例尺，當然，是負數(shù)的。如果是正數(shù)呢，拾取器就只會獲取我們的左上角那一塊；只需記住，正數(shù)顯示不對的就給個負數(shù)。
* 2.我們放大鏡展示區(qū)里的圖的尺寸是它父親的3倍多一點，這個尺寸是有一定規(guī)律的，好好想想，必須是倍數(shù)，不然我們最終的顯示就會變形。
* 3.大圖寬度減去放大鏡盒子寬度被鼠標控制的比例尺乘，會是什么結(jié)果呢，被放大了唄。并且是按比例放大的。其實，這里的減法，我不是很明白，如果換我寫，我想不明白為什么要這樣。。。。
* 反正，最后就是我們放大鏡里的大圖展示的定位坐標，是通過這么一系列蛋疼的算法得出來的。
* 用jq寫已經(jīng)是超級省代碼了，原生的，你就哭吧。
* */
$(".mask").show().css({ //同樣的還有我們用來獲取局部圖片的放大鏡拾取器吧，這樣叫吧，想不出別的名字了。
"left":X+"px", //這里的X和Y ，如果你覺得被上面一系列算法污染了，可以拿到最頂部，一樣可以執(zhí)行，不會被影響。
"top":Y+"px"
});
});
oZoomMin.on('mouseout',function () {
/*這里就是尾聲了，很簡單，鼠標移出，消失不見*/
$(".mask").hide();
$(".zoom_arge").hide();
});
/* var arr=[
oZoomMinImg=null,
aSmallImgLi=null,
aSmallImgLiImgs=null
]; */ //用完之后集體銷毀，不再占用內(nèi)存。
});
/*稍加修改，把他變成自己的插件吧。*/
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnifier</title>
<!--
20161109學習了一個jq寫放大鏡的demo。
需要注意的幾點：
1、在樣式設計上，浮動一定是所有的同級元素，比如下面結(jié)構(gòu)中的span按鈕和中間的包裹圖片的div盒子，一開始，我只給按鈕加了浮動，忘了中間包裹圖片的div，結(jié)果，你們知道的哈，我調(diào)試了半個小時……
2、還有一點是非常需要注意的，那就是下面的圖片大圖顯示區(qū)還有獲取局部圖片的盒子以及最終效果的放大鏡，說白了，就是三個盒子，他們的寬高必須是倍數(shù)的關系，不然最后你的放大鏡會出現(xiàn)放大偏移的bug。
3、沒了，暫時就是這些，視頻教學里，只是把代碼復制了一遍，也沒教這些實現(xiàn)的原理是怎樣的，蛋疼的我，研究了一下午，得出以下代碼注釋結(jié)論，如果你發(fā)現(xiàn)了錯誤，請來跟我交流哦。
-->
<style>
/*公共樣式：略*/
*{margin: 0;padding: 0;list-style: none;}
/*zoom：最外面的盒子，及父盒子，可以有可以沒有*/
.zoom{width: 800px;height: 700px;position: relative;margin: auto;}
/*zoomMin:這個命名其實給錯了，不想改了，他的意思是大圖展示區(qū)*/
.zoomMin{position: relative;width: 380px;height:380px;border: 1px solid indianred;margin-bottom: 3px; }
.zoomMin img{width: 100%;height: 380px;}
/*大圖展示區(qū)里的取圖片局部的“放大鏡”*/
.zoomMin .mask{width: 126px;height: 126px;background: red;opacity: 0.5;position: absolute;left: 0;top:0;display: none;}
/*zoomSmall：存放所有小圖的盒子*/
.zoomSmall{width: 380px}
/*里面還包含兩個按鈕*/
.zoomSmall span{cursor: pointer;float: left;width: 10px;height:60px;line-height: 60px;border-radius: 2px;background: #82878c; }
/*wrapSallImg：它被包含在zoomSmall里，是具體的備選小圖的集合容器*/
.wrapSallImg{width: 359px;overflow: hidden;margin-right:1px;float: left;/*因為兩個按鈕和他是同級別的，所以也要給浮動。*/}
.wrapSallImg ul{width:1450px;position: relative;/*這里最好是給這個relative相對定位，他表示被定位，但是還占位，使用absolute后，你可以試試……*/}
/*清浮動：略*/
.wrapSallImg ul:after{content: "";display: block;clear: both;}
.wrapSallImg ul li{cursor: pointer;float: left;width: 68px;height: 60px;border: 1px solid #ccc;margin: 0 1px; _display: inline;/*兼容ie6的margin問題*/}
.wrapSallImg>ul>li img{width: 100%;height: 60px;}
.wrapSallImg ul .action{border: 1px solid red; }
/*zoom_arge：最終的放大鏡就是這個了*/
.zoom_arge{width: 250px;height: 250px; border: 1px solid saddlebrown;position: absolute;top:0;
right:0;overflow: hidden;display: none;}
.zoom_arge img{height: 760px; width: 760px;position: absolute;}
</style>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="zoom">
<div class="zoomMin">
<img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt="">
<div class="mask"></div>
</div>
<div class="zoomSmall">
<span class="leftBtn"><</span>
<div class="wrapSallImg">
<ul>
<li class="action"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102539zuxem000ump9z11m.jpg.thumb.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/10293325N-0.jpg" alt=""></li>
<li><img src="http://t1.mmonly.cc/uploads/allimg/tuku2/1029331950-4.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102517tcktmhlz04ppwtck.jpg.thumb.jpg" alt=""></li>
<li><img src="http://attach.bbs.miui.com/forum/201408/17/102537fzhin5jjce5mcsrf.jpg.thumb.jpg" alt=""></li>
</ul>
</div>
<span class="rightBtn">></span>
</div>
<div class="zoom_arge"><img src="http://attach.bbs.miui.com/forum/201408/17/102430y8d11dmnp7stnz5d.jpg.thumb.jpg" alt=""></div>
</div>
<input type="text" woshizidingyishuxing="用來測試你的各種運行值對不對的一個框">
</body>
<script>
var oZoomMin=$(".zoomMin");
var oZoomMinImg=$(".zoomMin img");
var aSmallImgUl=$(".wrapSallImg ul");
var aSmallImgLi=$(".wrapSallImg ul li");
var aSmallImLiWidth=aSmallImgLi.outerWidth(true);//true：這樣就把元素的邊框和margin或padding值都計算進來了。
var aSmallImgLiImgs=$(".wrapSallImg ul li img");
var oLbtn=$(".leftBtn");
var oRbtn=$(".rightBtn");
var now=0;/*計數(shù)器：等價于自定義的循環(huán)參數(shù) i 一樣的道理*/
$(function () {
aSmallImgLi.on("mouseover",function () {
$(this).addClass("action").siblings().removeClass("action");
/*1.aSmallImgLi：所有小圖集合；
* 2.添加鼠標移入事件mouseover
* 3.$(this)：等于是jq自動幫你循環(huán)遍歷了這個集合，而$(this)就是指當前被鼠標移入的小圖。
* 4.執(zhí)行結(jié)果：給當前觸發(fā)事件的元素添加一個class類名叫action，其他的兄弟們刪掉這個class類名。
* */
});
aSmallImgLiImgs.on("click",function () {
var aSmallImgLiImgSrc= $(this).attr("src");
oZoomMinImg.prop("src",aSmallImgLiImgSrc);
$(".zoom_arge img").prop("src",aSmallImgLiImgSrc);
/*1.上面是鼠標移入事件，那這個就時點擊事件，我叫他確認事件。選半天了，總得確認一個吧。
* 2.有所不同的是上面的是給li加的class，而這個是給包含在li里面的img做的事件哦
* 3.執(zhí)行結(jié)果：當你點擊小圖片后，會通過prop（）方法把你的attr屬性的值得到，然后賦給大圖展示區(qū)和放大鏡的最終盒子，前提是他們里面都要包含一個img來接收這個地址。
* 4.值得一提的是：attr（）和prop（）方法功能是一樣的，都是獲取元素的屬性的，這里的屬性不是指css樣式啊，這個不要搞混同學，css樣式要用css（）獲取。那么，老定義了，（“寫一個值就是獲取”，“寫兩個值就是改值，并且要用雙引號啊，不然就是變量了”）
* 好，基本功能是一樣的，但是，切記，這是最容易被忽略的芝士：attr可以獲取你自己定義的屬性，而prop只能是獲取到元素本身就有的屬性。自定義屬性：比如你這樣寫<input type='text' value='123' papapa='red'>
* 那么，這個input里的papapa=‘red’就是你自定義的屬性。一樣，通過arrt（）方法，你也可以動態(tài)的給元素添加自定義屬性
**/
});
oLbtn.on("click",function () {
if (now==0){
now=0;
}else {
now--;
aSmallImgUl.animate({"left":"+="+aSmallImLiWidth},500);
}
/*1.我的天啊，這里是我一開始最頭痛的地方，這到底是為了什么，難死爸爸了。不過認真的分析后，嗨，太簡單了。
* 2.事件：左按鈕被點擊了。
* 3.然后進入判斷
* 4.我們的計數(shù)器now初始化值就是0，所以第一個條件成立，如果這時候你點擊左按鈕，他會不鳥你，原因就在于，人家在第一次判斷中勝利了。這也是我們想要的結(jié)果，如果還不太明白，你可以把else里的語句拿到if判斷外面點擊一下左按鈕，就會幡然醒悟。
* 5.其實關鍵的在于計數(shù)器now--：在事件外面的計數(shù)器now初始值是0，那么作為全局變量的它很微妙，在你點擊右鍵的時候，他其實被賦值為+1了，這個其實就相當于我們使用的for循環(huán)，這個計數(shù)器就相當于 i ,這也是js的一個非常方便的機制，全局變量可以共享函數(shù)里的值，甚至被傳入其他函數(shù)中。
* 6.那么當我們通過點擊右鍵給計數(shù)器賦值成為1后，那么你再點擊左按鈕，哎？對了，第一個判斷語句不會生效了，那么好的，執(zhí)行else語句吧。這里計數(shù)器--，就是now=now-1；這樣1-1后又是0了，你再點擊，好的，第一天判斷生效，就不給你執(zhí)行下面的語句了。這，就是實現(xiàn)思路。
* 7.關于“+=”，看過相關教程的應該都知道，就是讓值累加，這樣才能實現(xiàn)點一個走一個，不然，只會原地踏步。
* */
});
oRbtn.on("click",function () {
if (now==3){
now=3;
}else {
now++;
aSmallImgUl.animate({"left":-now*aSmallImLiWidth},500)
}
/*由上面的邏輯，同樣， 你可以推算出這個右按鈕的執(zhí)行邏輯。
* 這個參數(shù)3指的是被隱藏的那3個圖片的下標
* */
});
oZoomMin.on("mousemove",function (e) {
$(".zoom_arge").show(); //當大圖展示區(qū)被鼠標移入的時候，我們就讓放大鏡區(qū)顯示
var oZoomMinOffset=$(this).offset(); //這里有很多算法，數(shù)學不好的我，真是相當?shù)牡疤郯?#xff0c;不過，我們可以一點一點的推算，這，到底是為了什么？
var X=e.pageX-oZoomMinOffset.left - $(".mask").width()/2;
var Y=e.pageY-oZoomMinOffset.top - $(".mask").height()/2;
/*1.首先是獲取：聲明一個變量來接收大圖展示區(qū)$(this)的offset（）方法。這個方法里裝著兩個值offset().left和offset().top;
* 簡單解釋一下這是什么值哈：就是距離文檔的位置，譬如：div在body里，那么他的文檔距離就是他自己的margin或者padding，如果div里有一個p表情，那他的距離就是距離的div的，跟body甚至document都沒有關系了。
* 2.ok，獲取了之后呢就要賦值了，首先，我們要獲取到鼠標移動的坐標，函數(shù)（e）,然后e.pageX,不清楚的百度哈，這個很簡單了，就是鼠標的值，然后
* 這個值要進過一系列的計算，按照運算規(guī)則，應該是先計算最后面那個除以2，好，我們就先來看這個除以2.
* a.$(".mask")是我們局部圖片的拾取器，他的寬除以2還剩下一半的寬，我們只需要記住，這樣寫，是為了，讓鼠標移動到拾取器盒子的中間才會開始帶著拾取器去“漫游”，你可以先把我這除以二去掉看看執(zhí)行結(jié)果。
* b.那么剩下的就是大圖展示區(qū)距離文檔的距離 - 去了還剩一半尺寸的拾取器，最后他們兩剪完的數(shù)值還被鼠標的數(shù)值給減去了，好吧，我都不想寫注釋了，但，做人就要做到底。
* c.鼠標距離是指在當前這個元素的整個尺寸上，我們鼠標所在的坐標位置，它同樣具備橫向和縱向，他的left就是X，top就是Y，那么他減去當前元素距離文檔的距離得出的是這個鼠標所在的真實位置；
* d.這樣說你可能不明白，你可以做一個例子，如果，你的這個div就是貼在左上角的，沒有margin和padding，手欠的你還寫了*{margin:0;padding:0};那么offset()這個值就可以不用寫了，不信，你可以試試，在這種情況下
* 你把offset()去掉，當然也就不用減去oZoomMinOffset.left了，這時候，你會發(fā)現(xiàn)，我擦，居然也可以啊。但是，記住，但是，如果你給div，這div就是指最外面那個大盒子了，如果你給他了margin或者padding，嘿嘿，自己體驗吧。
* */
if (X<=0){
X=0;
}else if (X>=oZoomMin.width()-$(".mask").width()){
X=oZoomMin.width()-$(".mask").width()
}
if (Y<=0){
Y=0;
}else if (Y>=oZoomMin.height()-$(".mask").height()){
Y=oZoomMin.height()-$(".mask").height()
}
/*1.判斷條件一的功能是讓我們的拾取器不會超過父盒子可視區(qū)；
* 2.首先還是判斷，如果X的值等于0，那好我們就讓她等于0；下面的不執(zhí)行
* 3.如果不等于0；那么看看是是不是大于或者等于這個值呢？
* 4.重點來了，這個值是干嘛的，首先：oZoomMin我們的大圖展示區(qū)，他的寬減去拾取器的寬，還減去他的高度，就等于是在他身上挖去一塊拾取器大小的尺寸。
* 5.這個尺寸干嘛用啊？看下面；
* /
/*比例尺*/
var percentageX=X/(oZoomMin.width()-$(".mask").width());
var percentageY=Y/(oZoomMin.height()-$(".mask").height());
/*這個東西叫比例尺
* 它是什么呢他就是經(jīng)過上面判斷出來的那剩下的一大塊尺寸然后呢除以了大圖展示區(qū)減去拾取器的尺寸，哎？這不就是自己除以自己嘛？對啊，1/1=1吧；2/2=1吧，3/3=1吧；
* 比例尺，要的，就是這個1等1的比例如果你像把比例放大，即做到放大更多倍數(shù)的話，就把比例加大就好了，當然，那樣會顯示的很怪異，建議不要做。
* */
$("input").val(percentageX+"and"+percentageY);//顯示我們比例尺的
$(".zoom_arge img").css({
"left":-percentageX*($(".zoom_arge img").width()-$(".zoom_arge").width())+"px",
"top":-percentageY*($(".zoom_arge img").height()-$(".zoom_arge").height())+"px"
});
/*1.最終的這個放大鏡展示區(qū)，就是用比例尺，當然，是負數(shù)的。如果是正數(shù)呢，拾取器就只會獲取我們的左上角那一塊；只需記住，正數(shù)顯示不對的就給個負數(shù)。
* 2.我們放大鏡展示區(qū)里的圖的尺寸是它父親的3倍多一點，這個尺寸是有一定規(guī)律的，好好想想，必須是倍數(shù)，不然我們最終的顯示就會變形。
* 3.大圖寬度減去放大鏡盒子寬度被鼠標控制的比例尺乘，會是什么結(jié)果呢，被放大了唄。并且是按比例放大的。其實，這里的減法，我不是很明白，如果換我寫，我想不明白為什么要這樣。。。。
* 反正，最后就是我們放大鏡里的大圖展示的定位坐標，是通過這么一系列蛋疼的算法得出來的。
* 用jq寫已經(jīng)是超級省代碼了，原生的，你就哭吧。
* */
$(".mask").show().css({ //同樣的還有我們用來獲取局部圖片的放大鏡拾取器吧，這樣叫吧，想不出別的名字了。
"left":X+"px", //這里的X和Y ，如果你覺得被上面一系列算法污染了，可以拿到最頂部，一樣可以執(zhí)行，不會被影響。
"top":Y+"px"
});
});
oZoomMin.on('mouseout',function () {
/*這里就是尾聲了，很簡單，鼠標移出，消失不見*/
$(".mask").hide();
$(".zoom_arge").hide();
});
/* var arr=[
oZoomMinImg=null,
aSmallImgLi=null,
aSmallImgLiImgs=null
]; */ //用完之后集體銷毀，不再占用內(nèi)存。
});
/*稍加修改，把他變成自己的插件吧。*/
</script>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/webSong/p/6048355.html
總結(jié)
以上是生活随笔為你收集整理的Magnifier笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下查看cpu峰值,linux下
- 下一篇： 计算机工作日志小学,班主任工作日志记录