樣式展示：
思路
先準備兩張圖片,一張小圖,一張大圖，并且兩張圖片有一個整數比值
在小圖片的上方設定一個放大鏡樣式,背景設為透明色即可
大圖片外邊套一個父元素,超出父元素隱藏，大小為只能容納你的放大部分即可
父元素與放大鏡樣式的比值=大圖與小圖的比值
在小圖片上進行滑鼠移動時獲取滑鼠的坐標，得到滑鼠當前處于小圖片上的坐標
根據對應的比例求出大圖片的坐標并移動大圖片令放大部分處于父元素可見范圍
代碼
1.html部分
<div id="box">
<!-- toBig是放大鏡元素 -->
<div id="toBig"></div>
<!-- 小圖片 -->
<img src="img/05.jpg" id="smallImg" width="800px">
</div>
<div id="beBig">
<!-- 大圖片,比例為1.5倍數 -->
<img src="img/05.jpg" id="bigImg" width="1200px">
</div>2.css樣式部分
*{
margin: 0px;
padding: 0px;
}
#box{
position: relative;
float: left;
}
#toBig{
width: 80px;
height: 80px;
border: 1px solid gray;
background-color: transparent;
position: absolute;
}
#beBig{
float: left;
overflow: hidden;
border: 1px solid gray;
position: relative;
left: 40px;
top:325px ;
}
#bigImg{
position: absolute;
}3.腳本部分
<script type="text/javascript">
//獲取小圖片,大圖片,放大鏡元素,大圖片的父元素
var smallImg=document.querySelector("#smallImg");
var bigImg=document.querySelector("#bigImg");
var toBig=document.querySelector("#toBig");
var beBig=document.querySelector("#beBig");
/*在頁面加載時就先計算出小圖片與大圖片的比例*/
var q=0;
window.onload=function(){
q=bigImg.offsetWidth/smallImg.offsetWidth;
//根據放大鏡的寬高和比例計算要顯示放大內容的大小
beBig.style.width = toBig.clientWidth * q +"px";
beBig.style.height = toBig.clientHeight * q +"px";
}
//獲取放大鏡元素的中心，保證滑鼠在放大鏡中心
var xCenter=toBig.clientWidth/2;
var yCenter=toBig.clientHeight/2;
//flag是一個標志,當滑鼠按下時為true,可以進行移動
flag=false;
toBig.onmousedown = function(){
flag=true;
}
toBig.onmouseup = function(){
flag=false;
}
window.onmousemove=function(ev){
var ev = ev || window.event;
//flag為true時,放大鏡元素被按下并可以進行拖動
if(flag){
//獲取滑鼠當前所在位置并計算除了元素自身外要移動的位置
var mouseX=ev.clientX,mouseY=ev.clientY;
var trueX=mouseX - xCenter;
//判斷放大鏡元素是否超出小圖片范圍
if(trueX < smallImg.offsetLeft){
trueX = smallImg.offsetLeft;
}
if(trueX > smallImg.clientWidth - toBig.offsetWidth){
trueX = smallImg.clientWidth - toBig.offsetWidth;
}
var trueY=mouseY - yCenter;
if(trueY <= smallImg.offsetTop){
trueY = smallImg.offsetTop;
}
if(trueY > smallImg.clientHeight - toBig.offsetHeight){
trueY = smallImg.clientHeight - toBig.offsetHeight;
}
//小圖片移動
toBig.style.left = trueX + "px";
toBig.style.top = trueY + "px";
console.log(trueX,trueY);
// 大圖片要移動的位置
bigImg.style.left =-(trueX * q) + "px";
bigImg.style.top =-(trueY * q) + "px";
}
}
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/316665.html
標籤：其他