js實現(xiàn)淘寶瀏覽商品放大鏡功能
更新時間：2020年10月28日 11:31:42 作者：h03580
這篇文章主要為大家詳細介紹了js實現(xiàn)淘寶瀏覽商品放大鏡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)淘寶瀏覽商品放大鏡的具體代碼，供大家參考，具體內容如下
1、準備兩張圖片，其中一張圖片分辨率為另一張圖片的二倍。
2、前端頁面布局
//box1位左側原圖，box2為右側放大圖額顯示框,son為iv class="box1"> <div class="son"></div> <div class="ceng"></div> </div> <div class="box2"></div>
3、js寫邏輯
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let son=document.querySelector(".son");
let ceng=document.querySelector(".ceng");
//鼠標移入：son，box2出現(xiàn)
ceng.onmouseenter=function(){
son.style.display="block"
box2.style.display="block"
}
//鼠標移出：son，box2消失
ceng.onmouseleave=function(){
son.style.display="none"
box2.style.display="none"
}
//鼠標移動：son的位置隨鼠標移動，box2背景圖的位置變化
ceng.onmousemove=function(e){
let sw=e.clientX-son.offsetWidth/2
let sh=e.clientY-son.offsetHeight/2
if(sw>ceng.offsetWidth-son.offsetWidth){
sw=ceng.offsetWidth-son.offsetWidth
}
else if(sw<=0){
sw=0;
}
if(sh>ceng.offsetHeight-son.offsetHeight){
sh=ceng.offsetHeight-son.offHeight
}
else if(sh<=0){
sh=0;
}
son.style.left=sw+"px"
son.style.top=sh+"px"
box2.style.backgroundPosition=`${-2*sw}px ${-2*sh}px`
}
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大鏡</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 500px;
height:333px;
/* border:1px solid red; */
background: url('shatan.jpg') no-repeat;
position: relative;
float: left;
box-sizing: border-box
}
.son{
width: 100px;
height: 100px;
background-color: #fff;
position: fixed;
left:0;
top:0;
opacity: 0.7;
display: none;
}
.ceng{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.box2{
width: 200px;
height:200px;
border:1px solid red;
background: url('shatan1.jpg') no-repeat;
float: left;
display: none;
}
</style>
<body>
<div class="box1">
<div class="son"></div>
<div class="ceng"></div>
</div>
<div class="box2"></div>
</body>
</html>
<script>
let box1=document.querySelector(".box1");
let box2=document.querySelector(".box2");
let son=document.querySelector(".son");
let ceng=document.querySelector(".ceng");
ceng.onmouseenter=function(){
son.style.display="block"
box2.style.display="block"
}
ceng.onmouseleave=function(){
son.style.display="none"
box2.style.display="none"
}
ceng.onmousemove=function(e){
let sw=e.clientX-son.offsetWidth/2
let sh=e.clientY-son.offsetHeight/2
if(sw>ceng.offsetWidth-son.offsetWidth){
sw=ceng.offsetWidth-son.offsetWidth
}
else if(sw<=0){
sw=0;
}
if(sh>ceng.offsetHeight-son.offsetHeight){
sh=ceng.offsetHeight-son.offHeight
}
else if(sh<=0){
sh=0;
}
son.style.left=sw+"px"
son.style.top=sh+"px"
box2.style.backgroundPosition=`${-2*sw}px ${-2*sh}px`
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
本文主要介紹了最常見和最有用的字符串相關的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaScript中計算網(wǎng)頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了如何在web中實現(xiàn)類似excel的表格控件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
構建樹控件的比較理想的一種方法是用ul、li這種簡單的標簽組合來實現(xiàn)，但是你如果想實現(xiàn)復雜一點的比如要節(jié)點可編輯、可拖動、可更換風格等等我想ExtJS是最好的選擇了。2009-06-06
2009-07-07
細數(shù)promise與async/await的使用及區(qū)別說明
這篇文章主要介紹了細數(shù)promise與async/await的使用及區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Bootstrap模態(tài)框（Modal）實現(xiàn)過渡效果
這篇文章主要為大家詳細介紹了Bootstrap模態(tài)框（Modal）實現(xiàn)過渡效果的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
數(shù)組，即Array類型，是開發(fā)中最常用的類型之一。這篇文章主要介紹了淺談Javascript數(shù)組的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了ECharts柱狀圖過多添加滾動條的步驟(親測可用),添加echarts柱狀圖滾動條,首先添加js用來判斷當前視圖要顯示幾個及是否顯示滾動條,本文結合實例代碼介紹的非常詳細,需要的朋友參考下吧2024-01-01
這篇文章主要為大家詳細介紹了Bootstrap Paginator分頁插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05