溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用js實現一個淘寶瀏覽商品放大鏡功能，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
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出現
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>上述內容就是使用js實現一個淘寶瀏覽商品放大鏡功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
