成人视屏在线观看-国产99精品-国产精品1区2区-欧美一级在线观看-国产一区二区日韩-色九九九

您的位置:首頁技術文章
文章詳情頁

用js實現放大鏡效果

瀏覽:138日期:2024-04-14 08:37:52

本文實例為大家分享了js實現放大鏡效果的具體代碼,供大家參考,具體內容如下

該放大區域用背景圖片放大

<!DOCTYPE html><html lang='zh'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title></title> <style type='text/css'> body { height: 1200px; background-color: lightskyblue; } ul { margin: 0; padding: 0; list-style: none; } .itemarea { position: relative; width: 500px; height: 680px; border: 1px black solid; margin: 50px auto; } .itemarea .pic { margin-bottom: 15px; } .itemarea img { width: 500px; height: 600px; } .itemarea .pic .cover { position: absolute; left: 0; top: 0; width: 200px; height: 200px; background-image: url(img/7.png); opacity: 0.6; display: none; } .itemarea .list { display: flex; } .itemarea .list li { margin: auto; } .itemarea .list img { display: block; width: 50px; height: 50px; } .itemarea .detail { position: absolute; top: 0; left: 500px; /* 此處為放大2倍,顯示框的大小是遮陰框寬高的2倍 */ width: 400px; height: 400px; display: none; border: 1px black solid; background: url(img/1.PNG); /* 此處放大2倍,背景圖片的寬高是左邊顯示圖片的2倍 */ background-size: 1000px 1200px; /* background-size: 200%; 或者這樣寫*/ } .itemarea .list .current { border: 2px green solid; } </style> </head> <body> <div class='itemarea'> <div class='pic'> <img src='http://www.cgvv.com.cn/bcjs/img/1.PNG'> <div class='cover'></div> </div> <ul class='list'> <li><img src='http://www.cgvv.com.cn/bcjs/img/1.PNG'></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/2.PNG'></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/3.PNG'></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/4.PNG'></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/5.PNG'></li> <li><img src='http://www.cgvv.com.cn/bcjs/img/6.PNG'></li> </ul> <div class='detail'> </div> </div> <script type='text/javascript'> /* 需求 1,鼠標放入圖片時候,會動態修改圖片地址 2,鼠標放入大圖,會動態修改右邊圖片位置 2.1顯示圖片的放大鏡, 2.2顯示右邊效果 */ var itemarea = document.querySelector('.itemarea'); var list = document.querySelector('.list'); /* 上面的大圖片 */ img = document.querySelector('.pic img'); /* 所有的圖片 */ imgs = list.querySelectorAll('img'); /* 主圖片展示區域 */ pic = document.querySelector('.itemarea .pic'); /* 放大鏡 */ cover = document.querySelector('.cover'); /* 放大的區域 */ detail = document.querySelector('.detail'); /* 監聽事件,切換圖片src */ list.addEventListener('mousemove', function(e) { if (e.target.tagName == 'IMG') { img.src = e.target.src; detail.style.backgroundImage = 'url(' + e.target.src + ')'; /* 遍歷 所有邊框都為空*/ imgs.forEach(function(item) { item.className = ''; }) /* 選中的改變邊框顏色*/ e.target.className = 'current'; } }) pic.addEventListener('mousemove', function(e) { /* 放大鏡距離瀏覽器的距離 */ var x = e.clientX; y = e.clientY; /* 圖片框距離瀏覽器的距離 */ cx = pic.getBoundingClientRect().left; cy = pic.getBoundingClientRect().top; tx = x - cx - 100; ty = y - cy - 100; if (tx < 0) { tx = 0; } if (ty < 0) { ty = 0; } /* 顯示圖片寬-遮陰框的寬 */ if (tx >300) { tx = 300; } /* 顯示圖片高-遮陰框的高 */ if (ty > 400) { ty = 400; } cover.style.left = tx + 'px'; cover.style.top = ty + 'px'; /* 根據遮陰框在盒子的移動距離百分比------對應放映框在大圖片的移動距離百分比 */ /* tx,ty/遮陰框的極限范圍 */ detail.style.backgroundPosition = tx / 300 * 100 + '%' + ty / 400 * 100 + '%'; }) /* 移除隱藏 */ itemarea.onmouseout = function() { cover.style.display = 'none'; detail.style.display = 'none' } itemarea.onmouseover = function() { cover.style.display = 'block'; detail.style.display = 'block'; } </script> </body></html>

效果如下:

用js實現放大鏡效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 国产精品成人久久久久久久 | 国产伦精品一区二区三区免费 | 黄网在线观看免费网站台湾swag | 国产精品色内内在线播放 | 国产成人www免费人成看片 | 一区视频在线播放 | fc2久久 | 亚洲成人国产精品 | 日韩视频在线观看中字 | 久久er精品热线免费 | 九九精品免视频国产成人 | www亚洲免费 | 国产精品区一区二区免费 | 国产精品亚洲玖玖玖在线靠爱 | 美国一级毛片免费看成人 | 亚洲国产欧美日韩第一香蕉 | 韩国毛片基地 | 欧美久草 | 欧美国产成人免费观看永久视频 | 最近免费手机中文字幕3 | 最新国产精品亚洲 | 91精品专区 | 欧美精品99久久久久久人 | 一级毛片看一个 | 久久久久国产精品免费 | 日本性色| 午夜神马理论 | 国产成人精品日本亚洲网站 | 欧美在线视频 一区二区 | 超矿碰人人超人人看 | 深夜福利网址 | 精品国产成人a在线观看 | 欧美一级毛片在线 | m男亚洲一区中文字幕 | 亚洲欧美精品一区二区 | 9191精品国产观看 | 国产a一级毛片含羞草传媒 国产a自拍 | 久久在线观看免费视频 | 日韩在线视频一区二区三区 | 亚洲国产精品成人综合久久久 | 国产亚洲一区二区在线观看 |