js實現(xiàn)放大鏡效果的思路與代碼
更新時間：2021年10月15日 08:58:07 作者：weixin_52112794
這篇文章主要為大家詳細介紹了js實現(xiàn)放大鏡效果的思路與代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)放大鏡效果的具體代碼，供大家參考，具體內容如下
樣式展示：
思路
先準備兩張圖片,一張小圖,一張大圖，并且兩張圖片有一個整數(shù)比值
在小圖片的上方設置一個放大鏡樣式,背景設為透明色即可
大圖片外邊套一個父元素,超出父元素隱藏，大小為只能容納你的放大部分即可
父元素與放大鏡樣式的比值=大圖與小圖的比值
在小圖片上進行鼠標移動時獲取鼠標的坐標，得到鼠標當前處于小圖片上的坐標
根據(jù)對應的比例求出大圖片的坐標并移動大圖片令放大部分處于父元素可見范圍
代碼
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倍數(shù) -->
<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;
//根據(jù)放大鏡的寬高和比例計算要顯示放大內容的大小
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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了fetch跨域問題的使用詳解,fetch 的核心主要包括：Request , Response , Header , Body，利用了請求的異步特性 --- 它是基于 promise 的，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細介紹了js+canvas實現(xiàn)刮刮獎功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript實現(xiàn)前端網(wǎng)頁版倒計時
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端網(wǎng)頁版倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
JavaScript Rxjs mergeMap 的使用場合
這篇文章主要介紹了JavaScript Rxjs mergeMap 的使用場合,mergeMap 接收一個函數(shù)作為輸入?yún)?shù)，這個函數(shù)的輸入?yún)?shù)就是通過 pipe 鏈接 mergeMap 的 Observable 里包含的元素2022-07-07
先定義一個圖片的數(shù)組，然后通過image的onload事件來計算，注意，onload在ie和火狐有所不同。2011-01-01
本篇文章主要是對動態(tài)添加刪除表格行的js實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
bootstrap table插件的分頁與checkbox使用詳解
這篇文章主要為大家詳細介紹了bootstrap table插件的分頁與checkbox使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
prototype 關鍵字可以為JS原有對象或者自己創(chuàng)建的類中添加方法或者屬性。也可以實現(xiàn)繼承，下面以實例的方式為大家詳細介紹下2013-07-07
寫在最前面的最先執(zhí)行，Body的onload事件要在頁面加載完后才執(zhí)行。2010-06-06
JavaScript實現(xiàn)廣告的關閉與顯示效果實例
這篇文章主要介紹了JavaScript實現(xiàn)廣告的關閉與顯示效果,涉及javascript廣告窗口的關閉與顯示效果實現(xiàn)技巧,需要的朋友可以參考下2015-07-07