當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用JS逐步分解实现放大镜（看完就有收获）
生活随笔
收集整理的這篇文章主要介紹了
用JS逐步分解实现放大镜（看完就有收获）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 案例描述
- 案例圖示
- HTML
- CSS樣式
- JS代碼
- JS分解代碼----小圖點擊事件
- JS分解代碼----鼠標進入和移出
- JS分解代碼----鼠標的移動
- JS分解代碼----碰撞事件，放大鏡的移動
- JS分解代碼----超大圖的位置改變
- JS全部代碼展示
案例描述
在瀏覽器的左邊有一張大圖，下面有兩張小圖，點擊任何一張小圖會在大圖的位置顯示這張小圖的畫面。進入大圖，鼠標所指之處有一個透明的黃色區域，而在大圖的右邊（以下稱超大圖）會放大這一區域
案例圖示
HTML
<body><div id="box"><div id="small"><img src="./program1/images/1.jpg" ><span id="mask"></span></div><div id="big"><img src="./program1/images/1.jpg" ></div></div><div id="list"><ul><li><img src="./program1/images/1.jpg" width="100px"></li><li><img src="./program1/images/2.jpg" width="100px"></li></ul></div> </body>CSS樣式
詳解請看注釋
<style>* {padding: 0;margin: 0;box-sizing: border-box;list-style: none;border: none;}#box {width: 250px;height: 160px;margin-left: 100px;margin-top: 100px;position: relative;}#small {width: 100%;height: 100%;border: 1px solid #ccc; /* 放大鏡操作 */position: relative; }#small img{width: 100%;height: 100%;padding: 2px;}/* 顯微鏡 */#mask {width: 50px;height: 50px;/* 透明圖 */background-color:rgba(255, 255, 0,.4);position: absolute;left: 0;top: 0;cursor: move;/* 隱藏 */display: none;}#big {width: 400px;height: 255px;border: 1px solid #ccc;/* 為以后大圖位置改變作準備 */position: absolute;/* 250 + 10 margin */left: 260px; top: 0;/* 圖片超出部分隱藏 */overflow: hidden;/* 整個大圖開始是隱藏的 */display: none;}#big img {width: 700px;padding: 2px;position: absolute;left: 0;top: 0;margin: 0 auto;background-color: red;}#list {margin-top: 5px;margin-left: 100px;}#list li {float: left;margin-right: 5px;cursor: pointer;} </style>JS代碼
JS分解代碼----小圖點擊事件
（1）首先設置一個value屬性用于改變small_img中的圖片src，value的值為其下標+1
（2）監聽li中的點擊事件時，要改變small_img（大圖）中的圖片展示和big_img（超大圖）中的圖片展示
JS分解代碼----鼠標進入和移出
鼠標進入和移出都要改變放大鏡和超大圖的display屬性。
進入時display屬性值為*“block”*
移出時display屬性值為*“none”*
JS分解代碼----鼠標的移動
在鼠標進入事件中監聽鼠標的移動
這里運用到事件對象和offset家族的知識
可以參考：
事件對象
offset家族
注意事項看注釋
JS分解代碼----碰撞事件，放大鏡的移動
寫完上述代碼，你會發現放大鏡也能去到大圖以外的區域，這不是我們所期望的，這里就需要用到碰撞事件了
這里還是用到了offset家族的知識
這里用到的思維是用if判斷條件限制上下左右的邊界
放大鏡的移動就是改變它的top和left值（因為它相對父元素絕對定位）
不理解offset，請參考：offset家族
注意事項看注釋
JS分解代碼----超大圖的位置改變
big_img.style.left 和 big_img.style.top為負值（你可以試試去掉負號是什么樣的效果）
這里的重點是這個公式
JS全部代碼展示
<script>window.addEventListener ('load',function(){//獲取元素var small = $('small');var big = $('big'); var mask = $('mask');var allLi = document.getElementsByTagName('li');var small_img = small.children[0];var big_img = big.children[0];//遍歷每一個li中的點擊事件for (let i = 0; i < allLi.length; i++) {var li = allLi[i];//設置一個value屬性用于改變small_img中的圖片srcli.setAttribute('value',i+1);//監聽li中的點擊事件li.addEventListener('click',function(){//改變small_img中的圖片展示small_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");//改變big_img中的圖片展示big_img.setAttribute('src',"./program1/images/" + this.getAttribute('value') +".jpg");});}//監聽鼠標進入boxbox.addEventListener('mouseover',function() { //放大鏡顯示mask.style.display = 'block';//big圖片顯示big.style.display = 'block';//監聽鼠標的移動small.addEventListener('mousemove',function(event){//事件對象var e = event || window.event;//獲取鼠標的位置 鼠標顯示在mask中間:減去自身寬高度的一半//最好用pageX、pageY，不要用clientX、clientY 防止有分頁時出錯var small_x = event.pageX - box.offsetLeft - mask.offsetWidth*0.5;var small_y= event.pageY - box.offsetTop - mask.offsetHeight*0.5;//放大鏡碰撞 // console.log(mask.offsetLeft) ;//相對于box 因為boxx有定位if(small_x <= 0)small_x = 0;else if( small_x >= box.offsetWidth-mask.offsetWidth)small_x = box.offsetWidth-mask.offsetWidth - 2; //除去邊框if(small_y <= 0)small_y = 0;else if( small_y >= box.offsetHeight-mask.offsetHeight)small_y = box.offsetHeight-mask.offsetHeight - 2;//放大鏡跟著鼠標的位置 mask.style.left = small_x + 'px';mask.style.top = small_y + 'px';//big_img中的位置相應改變//公式：small_x/big_x = small_width/big_img_widthbig_img.style.left = - (event.pageX - box.offsetLeft) /(small.offsetWidth / big.offsetWidth) + 'px';big_img.style.top = -( event.pageY - box.offsetTop)/( small.offsetHeight / big.offsetHeight) + 'px';});});//監聽鼠標移出boxbox.addEventListener('mouseout',function(){//放大鏡隱藏mask.style.display = 'none';//big圖片隱藏big.style.display = 'none';})});//封裝function $(id) {return typeof id === 'string'? document.getElementById(id):null;} </script>總結
以上是生活随笔為你收集整理的用JS逐步分解实现放大镜（看完就有收获）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6.1. Principles of U
- 下一篇： gradle idea java ssm