简单购物放大镜分享
簡單購物放大鏡分享
? ? ? 日常生活中電商購物極大方便了我們的生活，與實體店中我們可以現場查看物品，試用商品，對商品有著直觀的感受不同電商購物的實體商品遠在我們千里之外，我們無法通過現場獲得直觀感受，這樣極大降低了人們的購物體驗，對此電商們為了增加客戶的購物體驗，我們可以看到在購物的詳情頁面中看到這樣一張商品高清圖，當我們鼠標劃上圖片時，在右側會跳出一張更大并將原圖放大的圖片如同放大鏡一般，清晰的展示了我們所選商品直觀圖片，例圖如下：
作為一位前端學習者，這里和大家分享一下一個簡單的購物放大鏡，同時也對自己所學的知識做一個記錄。
首先我們的拆解購物放大鏡邏輯動作：
1、鼠標劃上上圖片導航，原圖跳轉相對應圖片。
2、鼠標劃上原圖，放大區域及高清大圖出現。
3、放大區域移動過程中，鼠標一直顯示與放大區域中央，同時高清大圖響應移動，且移動反向為反向。
拆解完全以后，用代碼實現邏輯動作，具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/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;}
</style>
</head>
<body>
<div id="box">
<!-- 1:2:4 -->
<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>
</body>
</html>
<script>
var small=document.querySelectorAll('.small');
//所有小圖
var middle=document.querySelector('.middle');
//中圖
var abox = document.getElementById('box')
//盒子
var maximg =document.getElementById('maxImg')
//大圖
var filter = document.getElementById('filter')
for (var i=0;i<small.length;i++) {
small[i].οnmοuseοver=function(){
var asrc = this.getAttribute('data-url')
//獲取自定義屬性
middle.src = asrc;
//將自定義屬性中存放的圖片鏈接賦值給原圖圖片鏈接地址
maximg.src = asrc;
//將自定義屬性中存放的圖片鏈接賦值給大圖圖片鏈接地址
}
}
abox.onmouseover = function(){
//鼠標移入box盒子，將filter轉為塊元素
filter.style.display="block"
this.οnmοusemοve=function(e){
var e = e||event
//鼠標移動時提取e
var l= e.clientX-(abox.offsetLeft+filter.offsetWidth/2);
var h= e.clientY-(abox.offsetTop+filter.offsetHeight/2);
//此時鼠標坐標減去box相對于可視區的距離和filter自身的大小的一半的和得到filter在box中可移動的相對距離
l>abox.offsetWidth-filter.offsetWidth?l=abox.offsetWidth-filter.offsetWidth:l<0? l=0:l
h>abox.offsetHeight-filter.offsetHeight?h=abox.offsetHeight-filter.offsetHeight:h<0? h=0:h
//判斷當filter在box中可移動的相對距離超出邊界時的情況做出應對
filter.style.left=l+'px';
filter.style.top=h+'px';
//filter在box中可移動的相對距離
maximg.style.left=-2*l+'px'
maximg.style.top=-2*h+'px'
}
}
filter.οnmοuseοut=function(){
filter.style.display="none"
}
轉載于:https://www.cnblogs.com/xierencong/p/9060257.html
總結
- 上一篇： CISP-PTE注册信息安全专业人员渗透
- 下一篇： js进阶ajax函数封装（匿名函数作为参