国产精品嫩草99av在线_一区在线视频观看_欧美高清一区_欧美 日韩 国产 一区_99精品欧美一区二区三区_久久大香伊蕉在人线观看热2_一色屋精品视频在线观看网站_在线亚洲国产精品网站_亚洲区一区二区三区_你懂的视频一区二区

當前位置:首頁 > 科技  > 軟件

如何使用JavaScript創建一只圖像放大鏡?

來源: 責編: 時間:2023-08-05 11:45:41 4799觀看
導讀譯者 | 布加迪審校 | 重樓如果您曾經瀏覽過購物網站,可能遇到過圖像放大功能。它可以讓您放大圖像的特定區域,以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗。以一種無縫銜接的方式構建圖像放大鏡可能

譯者 | 布加迪2hK28資訊網——每日最新資訊28at.com

審校 | 重樓2hK28資訊網——每日最新資訊28at.com

如果您曾經瀏覽過購物網站,可能遇到圖像放大功能。它可以讓您放大圖像的特定區域,以便瀏覽。結合這個小小的重要功能可以大大改善您網站的用戶體驗。2hK28資訊網——每日最新資訊28at.com

2hK28資訊網——每日最新資訊28at.com

如果您正在構建一個照片庫應用程序,圖像放大鏡也派上用場,因為放大圖像的特定部分是一重要功能。2hK28資訊網——每日最新資訊28at.com

構建圖像放大鏡

該項目中使用的代碼放在GitHub代碼倉庫中,可供人們免費使用,采用MIT許可證。2hK28資訊網——每日最新資訊28at.com

創建一個文件夾,在該文件夾中添加index.html文件、style.css文件和main.js文件。將這個樣板代碼添加到index.html中2hK28資訊網——每日最新資訊28at.com

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Image Magnifier</title> <link rel="stylesheet" href="style.css" /></head><body></body></html>

body標簽中,創建一個類名為header”的div元素。然后在headerdiv中,添加h1標題元素來顯示圖像放大鏡的標題。2hK28資訊網——每日最新資訊28at.com

您可以根據需要來定制文本。接下來,包括兩個span元素,它們提供使用放大鏡的說明,并向用戶顯示當前縮放級別。2hK28資訊網——每日最新資訊28at.com

在標題部分之后,創建一個類名為container”的div元素。在這個div中,添加另一個類名為magnifier”的div元素,并運用“hidden類將其隱藏起來。2hK28資訊網——每日最新資訊28at.com

這個元素將表示放大鏡圖像。然后,添加一個script標簽,src屬性設置為/main.js。2hK28資訊網——每日最新資訊28at.com

<body> <class="header"> <h1>Image Magnifier</h1> <span>Press <strong>Arrow Up</strong> or <strong>Arrow Down</strong> to increase or decrease athe zoom level.</span> <span>Zoom Level: <strong class="zoom-level">1</strong></span> </div> <class="container"> <class="magnifier hidden"></div> </div> <script src="/main.js"></script></body>

把style.css文件中的代碼換成以下代碼。需要的話,您還可以使用Less之類的CSS預處理器。2hK28資訊網——每日最新資訊28at.com

:root { --magnifier-width: 150; --magnifier-height: 150;}body { display: flex; flex-direction: column; align-items: center;}.container { width: 400px; height: 300px; background-size: cover; background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg"); background-repeat: no-repeat; position: relative; cursor: none;}.magnifier { border-radius: 400px; box-shadow: 0px 11px 8px 0px #0000008a; position: absolute; width: calc(var(--magnifier-width) * 1px); height: calc(var(--magnifier-height) * 1px); cursor: none; background-image: url("https://cdn.pixabay.com/photo/2019/03/27/15/24/animal-4085255_1280.jpg"); background-repeat: no-repeat;}span { display: block;}.header { display: flex; flex-direction: column; align-items: center;}.hidden { visibility: hidden;}> span:nth-child(3) { font-size: 20px;

在main.js文件中,使用document.querySelector方法檢索帶有類名放大鏡容器”的HTML元素,并將它們分別賦予給變量magnifier和變量container。2hK28資訊網——每日最新資訊28at.com

然后,使用getComputedStyle函數檢索放大鏡元素的寬度和高度,然后使用substring和indexOf方法從返回的字符串中提取數值。2hK28資訊網——每日最新資訊28at.com

將提取的寬度賦予變量magnifierWidth,將提取的高度賦予變量magnifierHeight。2hK28資訊網——每日最新資訊28at.com

let magnifier = document.querySelector(".magnifier");let container = document.querySelector(".container");let magnifierWidth = getComputedStyle(magnifier).width.substring(  0,   getComputedStyle(magnifier).width.indexOf("p"));let magnifierHeight = getComputedStyle(magnifier).width.substring(   0,  getComputedStyle(magnifier).height.indexOf("p"));

接下來,為縮放級別、最大縮放級別以及光標和放大鏡圖像的位置設置變量。2hK28資訊網——每日最新資訊28at.com

let zoomLevelLabel = document.querySelector(".zoom-level");let zoom = 2;let maxZoomLevel = 5;let pointerX;let pointerY;let magnifyX;let magnifyY;

在上面的代碼塊中,pointerX和pointerY都表示光標在X和Y軸上的位置。2hK28資訊網——每日最新資訊28at.com

在,定義兩個輔助函數getZoomLevel返回當前縮放級別和getPointerPosition返回帶有光標x坐標和y坐標的對象。2hK28資訊網——每日最新資訊28at.com

function getZoomLevel() { return zoom;}function getPointerPosition() { return { x: pointerX, y: pointerY }}

接下來,創建一個updateMagImage函數,該函數使用當前光標位置創建一個新的MouseEvent對象,并將其分派給容器元素。這個函數負責更新放大鏡圖像。2hK28資訊網——每日最新資訊28at.com

function updateMagImage() { let evt = new MouseEvent("mousemove", { clientX: getPointerPosition().x, clientY: getPointerPosition().y, bubbles: true, cancelable: true, view: window, }); container.dispatchEvent(evt);}

現在,您應該為keyup事件的窗口對象添加一個事件偵聽器,當用戶按下ArrowUpArrowDown鍵時,可調整縮放級別。2hK28資訊網——每日最新資訊28at.com

keyup事件上的回調函數還負責更新縮放級別標簽,并觸發updateMagImage函數。2hK28資訊網——每日最新資訊28at.com

window.addEventListener("keyup", (e) => { if (e.key === "ArrowUp" && maxZoomLevel - Number(zoomLevelLabel.textContent) !== 0) { zoomLevelLabel.textContent = +zoomLevelLabel.textContent + 1; zoom = zoom + 0.3; updateMagImage(); } if (e.key === "ArrowDown" && !(zoomLevelLabel.textContent <= 1)) { zoomLevelLabel.textContent = +zoomLevelLabel.textContent - 1; zoom = zoom - 0.3; updateMagImage(); }});

然后針對“mousemove事件容器元素添加事件偵聽器。2hK28資訊網——每日最新資訊28at.com

在回調函數中,添加從放大鏡元素中移除hidden類以使其可見的功能,并計算鼠標相對容器的位置,考慮到頁面滾動。2hK28資訊網——每日最新資訊28at.com

該函數還應該將放大鏡的變換樣式設置為計算位置,并根據縮放級別和鼠標位置確定放大鏡圖像的背景大小和位置。2hK28資訊網——每日最新資訊28at.com

container.addEventListener("mousemove", (e) => { magnifier.classList.remove("hidden"); let rect = container.getBoundingClientRect(); let x = e.pageX - rect.left; let y = e.pageY - rect.top; x = x - window.scrollX; y = y - window.scrollY; magnifier.style.transform = `translate(${x}px, ${y}px)`; const imgWidth = 400; const imgHeight = 300; magnifier.style.backgroundSize = imgWidth * getZoomLevel() + "px " + imgHeight * getZoomLevel() + "px"; magnifyX = x * getZoomLevel() + 15; magnifyY = y * getZoomLevel() + 15; magnifier.style.backgroundPosition = -magnifyX + "px " + -magnifyY + "px";});

然后向容器元素添加另一個事件偵聽器,但這一事件偵聽器應該偵聽mouseout事件,并在鼠標離開容器區域時hidden類添回到放大鏡元素。2hK28資訊網——每日最新資訊28at.com

container.addEventListener("mouseout", () => { magnifier.classList.add("hidden");});

最后,為更新光標的x和y位置的mousmove事件向窗口對象添加事件偵聽器。2hK28資訊網——每日最新資訊28at.com

window.addEventListener("mousemove", (e) => { pointerX = e.clientX; pointerY = e.clientY;});

就是這樣您已成功地使用普通JavaScript構建了一個圖像放大鏡。2hK28資訊網——每日最新資訊28at.com

2hK28資訊網——每日最新資訊28at.com

圖像放大鏡如何改善用戶體驗

通過允許用戶放大圖像的特定區域,放大鏡可以讓他們更清晰地觀察產品細節。2hK28資訊網——每日最新資訊28at.com

這種增強的視覺探索水平給用戶灌輸了信心,因為他們可以做出明智的決定。這有助于提高轉化率和提高客戶保留率。2hK28資訊網——每日最新資訊28at.com

原文標題:How to Build an Image Magnifier With Vanilla JavaScript,作者:DAVID UZONDU2hK28資訊網——每日最新資訊28at.com

本文鏈接:http://www.rrqrq.com/showinfo-26-126-0.html如何使用JavaScript創建一只圖像放大鏡?

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 三言兩語說透柯里化和反柯里化

下一篇: 谷歌KDD'23工作:如何提升推薦系統Ranking模型訓練穩定性

標簽:
  • 熱門焦點
  • 鴻蒙OS 4.0公測機型公布:甚至連nova6都支持

    華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場,官方在發布會之前也已經正式給出了可升級的機型產品,這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
  • 紅魔電競平板評測:大屏幕硬實力

    前言:三年的疫情因為要上網課的原因激活了平板市場,如今網課的時代已經過去,大家的生活都恢復到了正軌,這也就意味著,真正考驗平板電腦生存的環境來了。也就是面對著這種殘酷的
  • 6月iOS設備好評榜:第一蟬聯榜首近一年

    作為安兔兔各種榜單里變化最小的那個,2023年6月的iOS好評榜和上個月相比沒有任何排名上的變化,僅僅是部分設備好評率的下降,長年累月的用戶評價和逐漸退出市場的老款機器讓這
  • Flowable工作流引擎的科普與實踐

    一.引言當我們在日常工作和業務中需要進行各種審批流程時,可能會面臨一系列技術和業務上的挑戰。手動處理這些審批流程可能會導致開發成本的增加以及業務復雜度的上升。在這
  • 電視息屏休眠仍有網絡上傳 愛奇藝被質疑“薅消費者羊毛”

    記者丨寧曉敏 見習生丨汗青出品丨鰲頭財經(theSankei) 前不久,愛奇藝發布了一份亮眼的一季報,不僅營收和會員營收創造歷史最佳表現,其運營利潤也連續6個月實現增長。自去年年初
  • 重估百度丨大模型,能撐起百度的“今天”嗎?

    自象限原創 作者|程心 羅輯2023年之前,對于自己的&ldquo;今天&rdquo;,百度也很迷茫。&ldquo;新業務到 2022 年底還是 0,希望 2023 年出來一個 1。&rdquo;這是2022年底,李彥宏
  • 2納米決戰2025

    集微網報道 從三強爭霸到四雄逐鹿,2nm的廝殺聲已然隱約傳來。無論是老牌勁旅臺積電、三星,還是誓言重回先進制程領先地位的英特爾,甚至初成立不久的新
  • iQOO Neo8系列今日官宣:首發天璣9200+ 全球安卓最強芯!

    在昨日舉行的的聯發科新一代旗艦芯片天璣9200+的發布會上,iQOO官方也正式宣布,全新的iQOO Neo8系列新品將全球首發搭載這款當前性能最強大的移動平臺
  • 世界人工智能大會國際日開幕式活動在世博展覽館開啟

    30日上午,世界人工智能大會國際日開幕式活動在世博展覽館開啟,聚集國際城市代表、重量級院士專家、國際創新企業代表,共同打造人工智能交流平臺。上海市副市
Top 国产精品嫩草99av在线_一区在线视频观看_欧美高清一区_欧美 日韩 国产 一区_99精品欧美一区二区三区_久久大香伊蕉在人线观看热2_一色屋精品视频在线观看网站_在线亚洲国产精品网站_亚洲区一区二区三区_你懂的视频一区二区
成人免费av网站| 日韩精品一区二区三区视频| 欧美福利视频一区| 青青青伊人色综合久久| 国产日韩精品久久| 国产精品美女久久久久av爽李琼| 色综合天天性综合| 狠狠色狠狠色综合系列| 久久久久天天天天| 香蕉久久夜色精品国产使用方法 | 欧美性天天影院| 8x福利精品第一导航| 麻豆国产精品视频| 欧美日韩的一区二区| 国产精品一区二区三区四区| 日韩一级成人av| 成人免费看片app下载| 精品蜜桃在线看| 成人免费看的视频| 久久精品一区二区三区不卡| 欧美极品一区| 亚洲天堂精品视频| 国产视频不卡| 日韩1区2区日韩1区2区| 欧美日韩dvd在线观看| 国产精品91一区二区| 亚洲精品在线电影| 合欧美一区二区三区| 亚洲精品欧美专区| 一本久久a久久免费精品不卡| 蜜臀av国产精品久久久久 | 国产农村妇女精品一二区 | 国产一区二区三区四区三区四| 亚洲国产精品精华液ab| 亚洲国产高清视频| 亚洲1区2区3区视频| 欧美性猛片xxxx免费看久爱| 国产成人99久久亚洲综合精品| 久久久精品tv| 国产欧美日韩综合一区在线观看 | 欧美日韩一区二区不卡| 国产a视频精品免费观看| 久久一日本道色综合| 欧美午夜不卡| 亚洲成人自拍偷拍| 欧美日韩亚洲综合一区 | 日本成人在线视频网站| 欧美日韩一本到| 9人人澡人人爽人人精品| 亚洲四区在线观看| 色域天天综合网| 成人亚洲一区二区一| 国产精品毛片大码女人| 久久精品国产清高在天天线| 国产九色sp调教91| 国产精品毛片大码女人| 久久久精彩视频| 国产成人无遮挡在线视频| 日本一区二区免费在线观看视频| 国产一区二区高清| 国内偷窥港台综合视频在线播放| 久久精品一区二区| 亚洲综合社区| 国产精品18久久久久久久久| 国产偷v国产偷v亚洲高清| 亚洲欧美日韩在线综合| 国产美女av一区二区三区| 中文字幕精品一区二区精品绿巨人 | 99国产精品久久久久久久成人热 | 亚洲欧洲在线观看av| 国产精品毛片在线看| 美女视频黄 久久| 国产日韩欧美精品综合| 新狼窝色av性久久久久久| 国产黄色成人av| 国产精品理论片| 在线观看一区二区视频| av中文一区二区三区| 一区二区三区四区在线播放| 欧美一区二区在线观看| 99视频在线精品国自产拍免费观看| 九九视频精品免费| 一区精品在线播放| 56国语精品自产拍在线观看| 亚洲成色www久久网站| 激情五月婷婷综合| 国产色产综合产在线视频| 91福利区一区二区三区| 欧美aⅴ99久久黑人专区| 日韩国产在线观看一区| 精品欧美乱码久久久久久1区2区| 国产欧美一区二区三区另类精品| 国产一区二区三区久久久| 亚洲精品中文在线| 精品91自产拍在线观看一区| 色综合久久久久网| 欧美精品三级| 精品亚洲aⅴ乱码一区二区三区| 国产精品激情偷乱一区二区∴| 欧美日韩国产欧美日美国产精品| 影院欧美亚洲| 久久不见久久见免费视频7| 欧美国产日韩亚洲一区| 精品视频一区 二区 三区| 亚洲欧洲在线一区| 粉嫩高潮美女一区二区三区| 午夜日韩在线电影| 国产精品伦一区| 日韩一区二区电影网| 久久成人精品| 国产精品分类| 国产成人亚洲综合a∨婷婷图片| 亚洲在线视频免费观看| 久久久精品中文字幕麻豆发布| 欧美综合在线视频| 一区二区三区四区五区精品视频| 成人99免费视频| 麻豆国产欧美日韩综合精品二区| 亚洲欧美在线视频| 精品国产髙清在线看国产毛片| 91久久奴性调教| 99精品视频免费观看| 成人视屏免费看| 奇米精品一区二区三区四区| 国产精品久久久久婷婷二区次| 7777精品久久久大香线蕉| 国产精品一级| 亚洲午夜一级| 粉嫩13p一区二区三区| 图片区小说区区亚洲影院| 国产精品免费观看视频| 欧美日韩国产电影| 久久久久国产精品一区二区| 激情欧美一区| 99re热这里只有精品免费视频| 激情伊人五月天久久综合| 婷婷综合另类小说色区| 亚洲免费在线播放| 国产精品久久久久aaaa| 精品少妇一区二区三区视频免付费 | 黑人精品欧美一区二区蜜桃| 午夜国产精品一区| 亚洲另类在线视频| 国产精品久久午夜| 久久先锋影音av| 精品国偷自产国产一区| 在线播放国产精品二区一二区四区 | 欧美一区二区视频免费观看| 色吊一区二区三区| 久久久久久穴| 久久狠狠婷婷| 男人天堂欧美日韩| 国产精品日本| 亚洲一区日韩| 国产情侣一区| 成人免费视频caoporn| 亚洲精品国久久99热| 欧美韩国日本一区| 久久精品视频一区二区三区| 精品国产凹凸成av人网站| 制服丝袜日韩国产| 欧美高清视频一二三区 | 日本亚洲一区二区| 婷婷中文字幕综合| 午夜精品福利一区二区蜜股av | 欧美日韩精品免费观看视频完整| 不卡视频免费播放| 亚洲综合激情小说| 欧美精品一区二区不卡| 亚洲欧美在线aaa| 中文一区在线| 国内一区二区三区在线视频| 555夜色666亚洲国产免| 国产亚洲一区字幕| 国产日本欧美一区二区| 精品日韩av一区二区| 伊大人香蕉综合8在线视| 欧美日韩国产免费观看| 99综合影院在线| 91麻豆免费观看| 91视频在线看| 国产一区二区三区四区三区四 | 高清成人免费视频| 成人永久免费视频| 99久久精品99国产精品| 91丨九色丨蝌蚪富婆spa| 欧美激情视频一区二区三区在线播放 | 在线亚洲免费| 亚洲欧洲精品一区二区| 99在线精品免费视频九九视| 中国女人久久久| 久久福利毛片| 欧洲日韩一区二区三区| 欧美日韩高清在线播放| 日韩欧美二区三区| 中文字幕第一页久久| 亚洲三级电影网站| 亚洲国产综合91精品麻豆| 美女任你摸久久| 国产成人99久久亚洲综合精品|