當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

用JS逐步分解实现放大镜（看完就有收获）

發(fā)布時(shí)間：2023/12/18 javascript 29 豆豆

生活随笔收集整理的這篇文章主要介紹了用JS逐步分解实现放大镜（看完就有收获）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

文章目錄

- 案例描述
- 案例圖示
- HTML
- CSS樣式
- JS代碼
- - JS分解代碼----小圖點(diǎn)擊事件
  - JS分解代碼----鼠標(biāo)進(jìn)入和移出
  - JS分解代碼----鼠標(biāo)的移動(dòng)
  - JS分解代碼----碰撞事件，放大鏡的移動(dòng)
  - JS分解代碼----超大圖的位置改變
  - JS全部代碼展示

案例描述

在瀏覽器的左邊有一張大圖，下面有兩張小圖，點(diǎn)擊任何一張小圖會(huì)在大圖的位置顯示這張小圖的畫(huà)面。進(jìn)入大圖，鼠標(biāo)所指之處有一個(gè)透明的黃色區(qū)域，而在大圖的右邊（以下稱超大圖）會(huì)放大這一區(qū)域

案例圖示

HTML

CSS樣式

詳解請(qǐng)看注釋

JS代碼

JS分解代碼----小圖點(diǎn)擊事件

（1）首先設(shè)置一個(gè)value屬性用于改變small_img中的圖片src，value的值為其下標(biāo)+1
（2）監(jiān)聽(tīng)li中的點(diǎn)擊事件時(shí)，要改變small_img（大圖）中的圖片展示和big_img（超大圖）中的圖片展示

for (let i = 0; i < allLi.length; i++) {var li = allLi[i];//設(shè)置一個(gè)value屬性用于改變small_img中的圖片srcli.setAttribute('value',i+1);//監(jiān)聽(tīng)li中的點(diǎn)擊事件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");});}

JS分解代碼----鼠標(biāo)進(jìn)入和移出

鼠標(biāo)進(jìn)入和移出都要改變放大鏡和超大圖的display屬性。
進(jìn)入時(shí)display屬性值為*“block”*
移出時(shí)display屬性值為*“none”*

//監(jiān)聽(tīng)鼠標(biāo)進(jìn)入boxbox.addEventListener('mouseover',function() { //放大鏡顯示mask.style.display = 'block';//big圖片顯示big.style.display = 'block'; });//監(jiān)聽(tīng)鼠標(biāo)移出boxbox.addEventListener('mouseout',function(){//放大鏡隱藏mask.style.display = 'none';//big圖片隱藏big.style.display = 'none';})});

JS分解代碼----鼠標(biāo)的移動(dòng)

在鼠標(biāo)進(jìn)入事件中監(jiān)聽(tīng)鼠標(biāo)的移動(dòng)
這里運(yùn)用到事件對(duì)象和offset家族的知識(shí)
可以參考：
事件對(duì)象
offset家族
注意事項(xiàng)看注釋

//監(jiān)聽(tīng)鼠標(biāo)的移動(dòng) small.addEventListener('mousemove',function(event){ //事件對(duì)象 var e = event || window.event; //獲取鼠標(biāo)的位置鼠標(biāo)顯示在mask中間:減去自身寬高度的一半 //最好用pageX、pageY，不要用clientX、clientY 防止有分頁(yè)時(shí)出錯(cuò)var small_x = event.pageX - box.offsetLeft - mask.offsetWidth*0.5; var small_y= event.pageY - box.offsetTop - mask.offsetHeight*0.5;

JS分解代碼----碰撞事件，放大鏡的移動(dòng)

寫(xiě)完上述代碼，你會(huì)發(fā)現(xiàn)放大鏡也能去到大圖以外的區(qū)域，這不是我們所期望的，這里就需要用到碰撞事件了
這里還是用到了offset家族的知識(shí)
這里用到的思維是用if判斷條件限制上下左右的邊界
放大鏡的移動(dòng)就是改變它的top和left值（因?yàn)樗鄬?duì)父元素絕對(duì)定位）
不理解offset，請(qǐng)參考：offset家族
注意事項(xiàng)看注釋

//放大鏡碰撞 //相對(duì)于box 因?yàn)閎ox有定位 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;//放大鏡跟著鼠標(biāo)的位置 mask.style.left = small_x + 'px'; mask.style.top = small_y + 'px';

JS分解代碼----超大圖的位置改變

big_img.style.left 和 big_img.style.top為負(fù)值（你可以試試去掉負(fù)號(hào)是什么樣的效果）
這里的重點(diǎn)是這個(gè)公式

//big_img中的位置相應(yīng)改變 //公式：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';

JS全部代碼展示

總結(jié)

以上是生活随笔為你收集整理的用JS逐步分解实现放大镜（看完就有收获）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： 6.1. Principles of U
下一篇： .NET实现Wap飞信协议