標籤:offset for border 技術分享 seo margin length 顯示 att
原生JavaScript執行個體之簡單放大鏡
放大鏡效果分析:
一、選項卡效果
滑鼠移入小圖列表其中一張圖時,小圖邊框效果,大盒出現對應的大圖
二、放大鏡效果
滑鼠移入大圖時,滑鼠位置出現放大鏡,滑鼠在放大鏡中心位置,大盒右邊出現細節大圖
三、範圍效果
1、放大鏡活動範圍在大盒內
2、當滑鼠離開大盒,放大鏡和細節圖消失
四、圖片比例
放大鏡框:大盒:細節圖 = 1:2:4
HTML結構
<!-- 大圖 --><div id="box"> <!--預設顯示的大圖片--> <img src="imgs/1-large.jpg" class="middle" width="400" height="400"> <!-- 放大鏡 --> <div id="filter"></div></div><!-- 細節圖 --><div id="max"> <img src="imgs/1-large.jpg" id="maxImg"></div><!-- 小圖列表 --><div> <img src="imgs/1-small.jpg" class="small" data-url="imgs/1-large.jpg"> <img src="imgs/2-small.jpg" class="small" data-url="imgs/2-large.jpg"> <img src="imgs/3-small.jpg" class="small" data-url="imgs/3-large.jpg"> <img src="imgs/4-small.jpg" class="small" data-url="imgs/4-large.jpg"> <img src="imgs/5-small.jpg" class="small" data-url="imgs/5-large.jpg"></div>
CSS樣式
.small { margin: 0 10px; border: 1px solid #fff;}.small:hover { border-color: #000;}/*放大鏡定位,初始隱藏*/#filter{ width: 200px; height: 200px; position: absolute; background: #000; opacity: 0.5; left: 0; top: 0; display: none;}/*大盒添加相對定位*/#box{position: relative;width: 400px}/*細節圖設定位置及絕對位置,初始隱藏*/#max{position: absolute;left:430px;top:0;overflow: hidden;width:400px;height: 400px;}#maxImg{width:800px;height: 800px;position: absolute; display: none;}
js
//擷取所有的小圖var oSmall = document.querySelectorAll(".small");//擷取大盒的圖片var omiddle = document.querySelector(".middle");//擷取細節圖var omaxImg = document.getElementById("maxImg");//擷取放大鏡var oFilter = document.getElementById("filter");//擷取大盒var oBox = document.getElementById("box");//選項卡效果//先給每個小圖添加滑鼠事件for(var i=0;i<oSmall.length;i++){//當移入當前小圖時 oSmall[i].onmouseover = function() { //擷取當前小圖的自訂屬性 var src = this.getAttribute("data-url"); //將擷取到的src賦值給大圖跟細節圖 omiddle.src = src; omaxImg.src = src; }}//放大鏡效果//當滑鼠移入大盒子時,放大鏡跟細節圖顯示oBox.onmouseover = function(){oFilter.style.display = "block";omaxImg.style.display = "block"; this.onmousemove = function(e){var e = e||event;//滑鼠位置var l = e.clientX - oBox.offsetLeft - oFilter.offsetWidth/2;var t = e.clientY - oBox.offsetTop - oFilter.offsetHeight/2;//放大鏡在盒子裡的判斷條件(三目判斷)l = l>oBox.offsetWidth - oFilter.offsetWidth?oBox.offsetWidth - oFilter.offsetWidth:(l<0?0:l);t = t>oBox.offsetHeight - oFilter.offsetHeight?oBox.offsetHeight - oFilter.offsetHeight:(t<0?0:t);//if判斷的方法/*if(l>oBox.offsetWidth - oFilter.offsetWidth){l = oBox.offsetWidth - oFilter.offsetWidth}if(t>oBox.offsetHeight - oFilter.offsetHeight){t = oBox.offsetHeight - oFilter.offsetHeight}if(l<0){l = 0;}if(t<0){t = 0;}*///賦值放大鏡的位置 oFilter.style.left = l+‘px‘;oFilter.style.top = t+‘px‘;//賦值細節圖的位置omaxImg.style.left = -2*l+‘px‘;omaxImg.style.top = -2*t+‘px‘;}}//滑鼠移出大盒後,放大鏡、細節圖隱藏oBox.onmouseout = function(e){oFilter.style.display = "none";omaxImg.style.display = "none";}
原生JavaScript執行個體之簡單放大鏡