JS實(shí)現(xiàn)放大鏡效果
JS實(shí)現(xiàn)放大鏡效果，供大家參考，具體內(nèi)容如下
鼠標(biāo)移到圖片上就可以放大一塊區(qū)域
代碼：
<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> #small{ width: 700px; height: 340px; position: absolute; left: 70px; top: 100px; } #small img{ width: 100%; height: 100%; } #mark{ width: 200px; height: 200px; background-color:white; position: absolute; opacity: 0.5; filter: alpha(opacity=50); left: 0px; top: 0px; display: none; } #big{ width: 400px; height: 400px; border: 1px solid black; left: 800px; top: 100px; position: absolute; overflow: hidden; display: none; } #big img{ width: 1400px; height: 680px; position: absolute; left: 0px; top: 0px; } </style> <script> window.onload = function(){ var oSmall = document.getElementById('small'); var oBig = document.getElementById('big'); var oMark = document.getElementById('mark'); var oBigImg = oBig.getElementsByTagName('img')[0]; oSmall.onmouseover = function(){ oMark.style.display = 'block'; oBig.style.display = 'block'; } oSmall.onmouseout = function(){ oMark.style.display = 'none'; oBig.style.display = 'none'; } oSmall.onmousemove = function(ev){ var e = ev || window.event; var l = e.clientX - oSmall.offsetLeft - 100; if(l <= 0){ l = 0; } if(l >= (700-200)){ l = 500; } var t = e.clientY - oSmall.offsetTop - 100; if(t <= 0){ t = 0; } if(t >= (340-200)){ t = 140; } oMark.style.left = l + ’px’; oMark.style.top = t + ’px’; /* 右邊圖片移動(dòng)方向與左邊圖片方向相反且成倍數(shù)移動(dòng) */ oBigImg.style.left = l * -2 + ’px’; oBigImg.style.top = t * -2 + ’px’; } } </script> </head> <body> <div id='small'> <img src='http://www.hdgsjgj.cn/bcjs/地獄之門(mén)衛(wèi)士 加里奧.jpg' alt='怎么回事'> <div id='mark'></div> </div> <div id='big'> <img src='http://www.hdgsjgj.cn/bcjs/地獄之門(mén)衛(wèi)士 加里奧.jpg' alt='怎么回事'> </div> </body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼2. python 浮點(diǎn)數(shù)四舍五入需要注意的地方3. Java GZip 基于內(nèi)存實(shí)現(xiàn)壓縮和解壓的方法4. python開(kāi)發(fā)一款翻譯工具5. 利用CSS制作3D動(dòng)畫(huà)6. jsp+servlet簡(jiǎn)單實(shí)現(xiàn)上傳文件功能（保存目錄改進(jìn)）7. Springboot 全局日期格式化處理的實(shí)現(xiàn)8. 完美解決vue 中多個(gè)echarts圖表自適應(yīng)的問(wèn)題9. SpringBoot+TestNG單元測(cè)試的實(shí)現(xiàn)10. PHP實(shí)現(xiàn)簡(jiǎn)單線(xiàn)性回歸之?dāng)?shù)學(xué)庫(kù)的重要性
網(wǎng)公網(wǎng)安備