用js實(shí)現(xiàn)放大鏡效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡效果的具體代碼,供大家參考,具體內(nèi)容如下
該放大區(qū)域用背景圖片放大
<!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倍,顯示框的大小是遮陰框?qū)捀叩?倍 */ 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="img/1.PNG"> <div class="cover"></div> </div> <ul class="list"> <li><img src="img/1.PNG"></li> <li><img src="img/2.PNG"></li> <li><img src="img/3.PNG"></li> <li><img src="img/4.PNG"></li> <li><img src="img/5.PNG"></li> <li><img src="img/6.PNG"></li> </ul> <div class="detail"> </div> </div> <script type="text/javascript"> /* 需求 1,鼠標(biāo)放入圖片時(shí)候,會(huì)動(dòng)態(tài)修改圖片地址 2,鼠標(biāo)放入大圖,會(huì)動(dòng)態(tài)修改右邊圖片位置 2.1顯示圖片的放大鏡, 2.2顯示右邊效果 */ var itemarea = document.querySelector(".itemarea"); var list = document.querySelector(".list"); /* 上面的大圖片 */ img = document.querySelector(".pic img"); /* 所有的圖片 */ imgs = list.querySelectorAll("img"); /* 主圖片展示區(qū)域 */ pic = document.querySelector(".itemarea .pic"); /* 放大鏡 */ cover = document.querySelector(".cover"); /* 放大的區(qū)域 */ detail = document.querySelector(".detail"); /* 監(jiān)聽事件,切換圖片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"; /* 根據(jù)遮陰框在盒子的移動(dòng)距離百分比------對(duì)應(yīng)放映框在大圖片的移動(dòng)距離百分比 */ /* 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>
效果如下:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于localStorage的存儲(chǔ),讀取,刪除
這篇文章主要介紹了關(guān)于localStorage的存儲(chǔ),讀取,刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07微信小程序 仿美團(tuán)分類菜單 swiper分類菜單
本文主要介紹了微信小程序仿美團(tuán)分類菜單(swiper分類菜單)的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript 就這么簡(jiǎn)單
僅9張思維導(dǎo)圖幫你輕松學(xué)習(xí)Javascript,從javascript變量、javascript運(yùn)算符、javascript函數(shù)基礎(chǔ)等多方面了解Javascript,就這么簡(jiǎn)單2016-06-06js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)仿百度風(fēng)云榜可重復(fù)多次調(diào)用的TAB切換選項(xiàng)卡效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素遍歷調(diào)用的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08JavaScript 井字棋人工智能實(shí)現(xiàn)代碼
JavaScript fights back in this artificial Tic Tac Toe game. Great script to have to entertain yourself and your visitors.2009-12-12