當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Magnifier笔记

發(fā)布時(shí)間：2024/3/12 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Magnifier笔记小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Magnifier</title>

<style>
/*公共樣式：略*/
*{margin: 0;padding: 0;list-style: none;}

/*zoom：最外面的盒子，及父盒子，可以有可以沒(méi)有*/
.zoom{width: 800px;height: 700px;position: relative;margin: auto;}
/*zoomMin:這個(gè)命名其實(shí)給錯(cuò)了，不想改了，他的意思是大圖展示區(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}
/*里面還包含兩個(gè)按鈕*/
.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;/*因?yàn)閮蓚€(gè)按鈕和他是同級(jí)別的，所以也要給浮動(dòng)。*/}
.wrapSallImg ul{width:1450px;position: relative;/*這里最好是給這個(gè)relative相對(duì)定位，他表示被定位，但是還占位，使用absolute后，你可以試試……*/}
/*清浮動(dòng)：略*/
.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問(wèn)題*/}
.wrapSallImg>ul>li img{width: 100%;height: 60px;}
.wrapSallImg ul .action{border: 1px solid red; }

/*zoom_arge：最終的放大鏡就是這個(gè)了*/
.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="用來(lái)測(cè)試你的各種運(yùn)行值對(duì)不對(duì)的一個(gè)框">
</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值都計(jì)算進(jìn)來(lái)了。
var aSmallImgLiImgs=$(".wrapSallImg ul li img");
var oLbtn=$(".leftBtn");
var oRbtn=$(".rightBtn");
var now=0;/*計(jì)數(shù)器：等價(jià)于自定義的循環(huán)參數(shù) i 一樣的道理*/
$(function () {
aSmallImgLi.on("mouseover",function () {
$(this).addClass("action").siblings().removeClass("action");
/*1.aSmallImgLi：所有小圖集合；
* 2.添加鼠標(biāo)移入事件mouseover
* 3.$(this)：等于是jq自動(dòng)幫你循環(huán)遍歷了這個(gè)集合，而$(this)就是指當(dāng)前被鼠標(biāo)移入的小圖。
* 4.執(zhí)行結(jié)果：給當(dāng)前觸發(fā)事件的元素添加一個(gè)class類名叫action，其他的兄弟們刪掉這個(gè)class類名。
* */
});
aSmallImgLiImgs.on("click",function () {
var aSmallImgLiImgSrc= $(this).attr("src");
oZoomMinImg.prop("src",aSmallImgLiImgSrc);
$(".zoom_arge img").prop("src",aSmallImgLiImgSrc);
/*1.上面是鼠標(biāo)移入事件，那這個(gè)就時(shí)點(diǎn)擊事件，我叫他確認(rèn)事件。選半天了，總得確認(rèn)一個(gè)吧。
* 2.有所不同的是上面的是給li加的class，而這個(gè)是給包含在li里面的img做的事件哦
* 3.執(zhí)行結(jié)果：當(dāng)你點(diǎn)擊小圖片后，會(huì)通過(guò)prop（）方法把你的attr屬性的值得到，然后賦給大圖展示區(qū)和放大鏡的最終盒子，前提是他們里面都要包含一個(gè)img來(lái)接收這個(gè)地址。
* 4.值得一提的是：attr（）和prop（）方法功能是一樣的，都是獲取元素的屬性的，這里的屬性不是指css樣式啊，這個(gè)不要搞混同學(xué)，css樣式要用css（）獲取。那么，老定義了，（“寫(xiě)一個(gè)值就是獲取”，“寫(xiě)兩個(gè)值就是改值，并且要用雙引號(hào)啊，不然就是變量了”）
* 好，基本功能是一樣的，但是，切記，這是最容易被忽略的芝士：attr可以獲取你自己定義的屬性，而prop只能是獲取到元素本身就有的屬性。自定義屬性：比如你這樣寫(xiě)<input type='text' value='123' papapa='red'>
* 那么，這個(gè)input里的papapa=‘red’就是你自定義的屬性。一樣，通過(guò)arrt（）方法，你也可以動(dòng)態(tài)的給元素添加自定義屬性
**/
});
oLbtn.on("click",function () {

if (now==0){
now=0;
}else {
now--;
aSmallImgUl.animate({"left":"+="+aSmallImLiWidth},500);
}
/*1.我的天啊，這里是我一開(kāi)始最頭痛的地方，這到底是為了什么，難死爸爸了。不過(guò)認(rèn)真的分析后，嗨，太簡(jiǎn)單了。
* 2.事件：左按鈕被點(diǎn)擊了。
* 3.然后進(jìn)入判斷
* 4.我們的計(jì)數(shù)器now初始化值就是0，所以第一個(gè)條件成立，如果這時(shí)候你點(diǎn)擊左按鈕，他會(huì)不鳥(niǎo)你，原因就在于，人家在第一次判斷中勝利了。這也是我們想要的結(jié)果，如果還不太明白，你可以把else里的語(yǔ)句拿到if判斷外面點(diǎn)擊一下左按鈕，就會(huì)幡然醒悟。
* 5.其實(shí)關(guān)鍵的在于計(jì)數(shù)器now--：在事件外面的計(jì)數(shù)器now初始值是0，那么作為全局變量的它很微妙，在你點(diǎn)擊右鍵的時(shí)候，他其實(shí)被賦值為+1了，這個(gè)其實(shí)就相當(dāng)于我們使用的for循環(huán)，這個(gè)計(jì)數(shù)器就相當(dāng)于 i ,這也是js的一個(gè)非常方便的機(jī)制，全局變量可以共享函數(shù)里的值，甚至被傳入其他函數(shù)中。
* 6.那么當(dāng)我們通過(guò)點(diǎn)擊右鍵給計(jì)數(shù)器賦值成為1后，那么你再點(diǎn)擊左按鈕，哎？對(duì)了，第一個(gè)判斷語(yǔ)句不會(huì)生效了，那么好的，執(zhí)行else語(yǔ)句吧。這里計(jì)數(shù)器--，就是now=now-1；這樣1-1后又是0了，你再點(diǎn)擊，好的，第一天判斷生效，就不給你執(zhí)行下面的語(yǔ)句了。這，就是實(shí)現(xiàn)思路。
* 7.關(guān)于“+=”，看過(guò)相關(guān)教程的應(yīng)該都知道，就是讓值累加，這樣才能實(shí)現(xiàn)點(diǎn)一個(gè)走一個(gè)，不然，只會(huì)原地踏步。
* */
});
oRbtn.on("click",function () {
if (now==3){
now=3;
}else {
now++;
aSmallImgUl.animate({"left":-now*aSmallImLiWidth},500)
}
/*由上面的邏輯，同樣，你可以推算出這個(gè)右按鈕的執(zhí)行邏輯。
* 這個(gè)參數(shù)3指的是被隱藏的那3個(gè)圖片的下標(biāo)
* */
});
oZoomMin.on("mousemove",function (e) {
$(".zoom_arge").show(); //當(dāng)大圖展示區(qū)被鼠標(biāo)移入的時(shí)候，我們就讓放大鏡區(qū)顯示
var oZoomMinOffset=$(this).offset(); //這里有很多算法，數(shù)學(xué)不好的我，真是相當(dāng)?shù)牡疤郯?#xff0c;不過(guò)，我們可以一點(diǎn)一點(diǎn)的推算，這，到底是為了什么？
var X=e.pageX-oZoomMinOffset.left - $(".mask").width()/2;
var Y=e.pageY-oZoomMinOffset.top - $(".mask").height()/2;
/*1.首先是獲取：聲明一個(gè)變量來(lái)接收大圖展示區(qū)$(this)的offset（）方法。這個(gè)方法里裝著兩個(gè)值offset().left和offset().top;
* 簡(jiǎn)單解釋一下這是什么值哈：就是距離文檔的位置，譬如：div在body里，那么他的文檔距離就是他自己的margin或者padding，如果div里有一個(gè)p表情，那他的距離就是距離的div的，跟body甚至document都沒(méi)有關(guān)系了。
* 2.ok，獲取了之后呢就要賦值了，首先，我們要獲取到鼠標(biāo)移動(dòng)的坐標(biāo)，函數(shù)（e）,然后e.pageX,不清楚的百度哈，這個(gè)很簡(jiǎn)單了，就是鼠標(biāo)的值，然后
* 這個(gè)值要進(jìn)過(guò)一系列的計(jì)算，按照運(yùn)算規(guī)則，應(yīng)該是先計(jì)算最后面那個(gè)除以2，好，我們就先來(lái)看這個(gè)除以2.
* a.$(".mask")是我們局部圖片的拾取器，他的寬除以2還剩下一半的寬，我們只需要記住，這樣寫(xiě)，是為了，讓鼠標(biāo)移動(dòng)到拾取器盒子的中間才會(huì)開(kāi)始帶著拾取器去“漫游”，你可以先把我這除以二去掉看看執(zhí)行結(jié)果。
* b.那么剩下的就是大圖展示區(qū)距離文檔的距離 - 去了還剩一半尺寸的拾取器，最后他們兩剪完的數(shù)值還被鼠標(biāo)的數(shù)值給減去了，好吧，我都不想寫(xiě)注釋了，但，做人就要做到底。
* c.鼠標(biāo)距離是指在當(dāng)前這個(gè)元素的整個(gè)尺寸上，我們鼠標(biāo)所在的坐標(biāo)位置，它同樣具備橫向和縱向，他的left就是X，top就是Y，那么他減去當(dāng)前元素距離文檔的距離得出的是這個(gè)鼠標(biāo)所在的真實(shí)位置；
* d.這樣說(shuō)你可能不明白，你可以做一個(gè)例子，如果，你的這個(gè)div就是貼在左上角的，沒(méi)有margin和padding，手欠的你還寫(xiě)了*{margin:0;padding:0};那么offset()這個(gè)值就可以不用寫(xiě)了，不信，你可以試試，在這種情況下
* 你把offset()去掉，當(dāng)然也就不用減去oZoomMinOffset.left了，這時(shí)候，你會(huì)發(fā)現(xiàn)，我擦，居然也可以啊。但是，記住，但是，如果你給div，這div就是指最外面那個(gè)大盒子了，如果你給他了margin或者padding，嘿嘿，自己體驗(yàn)吧。
* */
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.判斷條件一的功能是讓我們的拾取器不會(huì)超過(guò)父盒子可視區(qū)；
* 2.首先還是判斷，如果X的值等于0，那好我們就讓她等于0；下面的不執(zhí)行
* 3.如果不等于0；那么看看是是不是大于或者等于這個(gè)值呢？
* 4.重點(diǎn)來(lái)了，這個(gè)值是干嘛的，首先：oZoomMin我們的大圖展示區(qū)，他的寬減去拾取器的寬，還減去他的高度，就等于是在他身上挖去一塊拾取器大小的尺寸。
* 5.這個(gè)尺寸干嘛用啊？看下面；
* /
/*比例尺*/
var percentageX=X/(oZoomMin.width()-$(".mask").width());
var percentageY=Y/(oZoomMin.height()-$(".mask").height());
/*這個(gè)東西叫比例尺
* 它是什么呢他就是經(jīng)過(guò)上面判斷出來(lái)的那剩下的一大塊尺寸然后呢除以了大圖展示區(qū)減去拾取器的尺寸，哎？這不就是自己除以自己嘛？對(duì)啊，1/1=1吧；2/2=1吧，3/3=1吧；
* 比例尺，要的，就是這個(gè)1等1的比例如果你像把比例放大，即做到放大更多倍數(shù)的話，就把比例加大就好了，當(dāng)然，那樣會(huì)顯示的很怪異，建議不要做。
* */
$("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.最終的這個(gè)放大鏡展示區(qū)，就是用比例尺，當(dāng)然，是負(fù)數(shù)的。如果是正數(shù)呢，拾取器就只會(huì)獲取我們的左上角那一塊；只需記住，正數(shù)顯示不對(duì)的就給個(gè)負(fù)數(shù)。
* 2.我們放大鏡展示區(qū)里的圖的尺寸是它父親的3倍多一點(diǎn)，這個(gè)尺寸是有一定規(guī)律的，好好想想，必須是倍數(shù)，不然我們最終的顯示就會(huì)變形。
* 3.大圖寬度減去放大鏡盒子寬度被鼠標(biāo)控制的比例尺乘，會(huì)是什么結(jié)果呢，被放大了唄。并且是按比例放大的。其實(shí)，這里的減法，我不是很明白，如果換我寫(xiě)，我想不明白為什么要這樣。。。。
* 反正，最后就是我們放大鏡里的大圖展示的定位坐標(biāo)，是通過(guò)這么一系列蛋疼的算法得出來(lái)的。
* 用jq寫(xiě)已經(jīng)是超級(jí)省代碼了，原生的，你就哭吧。
* */
$(".mask").show().css({ //同樣的還有我們用來(lái)獲取局部圖片的放大鏡拾取器吧，這樣叫吧，想不出別的名字了。
"left":X+"px", //這里的X和Y ，如果你覺(jué)得被上面一系列算法污染了，可以拿到最頂部，一樣可以執(zhí)行，不會(huì)被影響。
"top":Y+"px"
});
});
oZoomMin.on('mouseout',function () {
/*這里就是尾聲了，很簡(jiǎn)單，鼠標(biāo)移出，消失不見(jiàn)*/
$(".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笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： linux下查看cpu峰值,linux下
下一篇：计算机工作日志小学,班主任工作日志记录