欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實現(xiàn)圖片局部放大鏡效果的示例代碼

 更新時間：2023年12月06日 11:40:10   作者：杰森斯坦李  
這篇文章主要為大家詳細介紹了如何利用JavaScript實現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下

js實現(xiàn)放大鏡，先來看效果

鼠標移動到左側(cè)區(qū)域，右側(cè)區(qū)域放大圖片對應(yīng)的位置

首先來看html部分，一共由3個div組成

  <!-- 圖片盒子 -->
  <div class="box">
    <!-- 放大鏡 -->
    <div class="area"></div>
  </div>
  <!-- 放大后的區(qū)域 -->
  <div class="zoom-content"></div>

下面來編寫一下css

    .box{
      display: inline-block;
      position: relative;
      width:400px;
      height:400px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-size: 100% 100%;
      vertical-align: top;
    }
    .area{
      position: absolute;
      width:200px;
      height:200px;
      background-color: rgba(0, 0, 255,.5);
      cursor: move;
    }
    .zoom-content{
      display: inline-block;
      width:500px;
      height:500px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-repeat: no-repeat;
    }

編寫完成后如圖

下面開始js邏輯部分

1.我們首先開始實現(xiàn)第一個功能，鼠標移入框內(nèi)后，讓藍色的盒子（放大鏡）跟著鼠標移動

    // 先獲取DOM元素
    
    let area = document.querySelector('.area'); // 放大鏡
    let box = document.querySelector('.box'); // 圖片盒子
    let zoom = document.querySelector('.zoom-content'); //右側(cè)放大區(qū)域
    
    // 放大鏡藍色背景盒子尺寸
    let areaWidth = area.clientWidth;
    let areaHeight = area.clientHeight;
    // 鼠標移入后的事件
    const enter = (event) => {
      // 設(shè)置放大鏡的位置
      setAreaPosition(event);
      box.addEventListener("mousemove",move);
      box.addEventListener("mouseleave",leave);
    }
    // 鼠標移動事件    
    const move = (event) => {
      setAreaPosition(event);
    }
    //鼠標移出后 取消綁定一下
    const leave = () => {
      box.removeEventListener("mousemove",move);
      box.removeEventListener("mouseleave",leave);
    }
    // 設(shè)置放大鏡的位置
    const setAreaPosition = (event) => {
      // 讓放大鏡垂直居中顯示在鼠標移動后的位置 需減去自身方向的一半
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      area.style.left = x+"px";
      area.style.top = y+"px";
    }
    box.addEventListener("mouseenter",enter);

這樣就能讓放大鏡跟隨鼠標移動了，但是有點瑕疵，需要讓放大鏡一直保持在盒子里面，需要判斷一下距離邊界情況

    // 圖片盒子大小尺寸
    let boxWidth = box.clientWidth;
    let boxHeight = box.clientHeight;
    // 放大鏡X軸極限距離
    let maxX = boxWidth - areaWidth;
    // 放大鏡Y軸極限距離
    let maxY = boxHeight - areaHeight;

maxX，maxY就是邊界的距離，我們需要在setAreaPosition函數(shù)中，對x軸，y軸的大小做一下限制

    const setAreaPosition = (event) => {
      // 讓放大鏡垂直居中顯示在鼠標移動后的位置 需減去自身方向的一半
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      // x的值不能大于maxX,同時不能小于0，y的判斷同理
      x = Math.min(maxX,Math.max(0,x));
      // y的值不能大于maxY,同時不能小于0
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
    }

通過Math.min方法和Math.max方法就能對x,y極限值做限制了

下面我們來設(shè)置一下右側(cè)放大區(qū)域，目前來看它并沒有放大，而是保持了圖片本來的大小，下面是js部分

    // 先獲取一下縮放的倍率，也就是放大鏡和圖片盒子做對比
    // 縮放倍率
    let xScale = boxWidth / areaWidth;
    let yScale = boxHeight / areaHeight;
    // 知道了倍率后，我們對放大區(qū)域的圖片大小做一下設(shè)置
    // 因為使用的是背景圖片所以需設(shè)置一下backgroundSize屬性
    zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;

這一部分呢可以理解為把右側(cè)的放大區(qū)域(.zoom-content)看作是放大鏡(.area);

下面只差最后一部分了，移動鼠標，讓右側(cè)放大區(qū)域改變，只需要改變(.zoom-content)的backgroundPosition即可

那的backgroundPosition的值怎么計算呢？

綠色背景假設(shè)為圖片，左側(cè)的藍色是放大鏡，右側(cè)的藍色是放大后的區(qū)域，這樣就一目了然了，先算出放大鏡距離圖片盒子的多少比例，然后在拿這個比例去算出占放大后的背景多少像素就可以了

    // 縮放后的圖片尺寸
    let bgWidth = zoom.clientWidth * xScale;
    let bgHeight = zoom.clientHeight * yScale;

setAreaPosition函數(shù)修改一下

    // 設(shè)置放大鏡的位置
    const setAreaPosition = (event) => {
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      // x的值不能大于maxX,同時不能小于0，y的判斷同理
      x = Math.min(maxX,Math.max(0,x));
      // y的值不能大于maxY,同時不能小于0
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
      // 計算背景距離，為什么為負數(shù)，負數(shù)圖片為往右走，正數(shù)為左走
      // x / boxWidth 放大鏡距離左側(cè)的比例，根據(jù)這個比例 * 相應(yīng)的圖片寬度，就知道圖片要走到哪里了
      zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
    }

后續(xù)可以在移入和移出時改變(.area)放大鏡的visibility就行

// enter 移入
area.style.visibility = 'visible';
// leave 移出
area.style.visibility = 'hidden';

完整代碼如下

<!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>
    .box{
      display: inline-block;
      position: relative;
      width:400px;
      height:400px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-size: 100% 100%;
      vertical-align: top;
    }
    .area{
      position: absolute;
      width:200px;
      height:200px;
      background-color: rgba(0, 0, 255,.5);
      visibility: hidden;
      cursor: move;
    }
    .zoom-content{
      display: inline-block;
      width:500px;
      height:500px;
      border:1px solid red;
      background-image: url('https://img2.baidu.com/it/u=3663343515,2094544376&fm=253&fmt=auto&app=138&f=PNG?w=400&h=400');
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="area"></div>
  </div>
  <div class="zoom-content"></div>
  <script>
    // 獲取DOM元素
    let area = document.querySelector('.area');
    let box = document.querySelector('.box');
    let zoom = document.querySelector('.zoom-content');
    // 藍色背景盒子尺寸
    let areaWidth = area.clientWidth;
    let areaHeight = area.clientHeight;
    // 圖片盒子大小尺寸
    let boxWidth = box.clientWidth;
    let boxHeight = box.clientHeight;
    // 藍色盒子X軸極限距離
    let maxX = boxWidth - areaWidth;
    // 藍色盒子Y軸極限距離
    let maxY = boxHeight - areaHeight;
    // 縮放倍率
    let xScale = boxWidth / areaWidth;
    let yScale = boxHeight / areaHeight;
    // 縮放后的圖片尺寸
    let bgWidth = zoom.clientWidth * xScale;
    let bgHeight = zoom.clientHeight * yScale;
    zoom.style.backgroundSize=`${xScale * 100}% ${yScale * 100}%`;
    const enter = (event) => {
      area.style.visibility = 'visible';
      setAreaPosition(event);
      box.addEventListener("mousemove",move);
      box.addEventListener("mouseleave",leave);
    }
    const leave = () => {
      area.style.visibility = 'hidden';
      box.removeEventListener("mousemove",move);
      box.removeEventListener("mouseleave",leave);
    }
    const setAreaPosition = (event) => {
      let x = event.x - areaWidth / 2;
      let y = event.y - areaHeight / 2;
      x = Math.min(maxX,Math.max(0,x));
      y = Math.min(maxY,Math.max(0,y));
      area.style.left = x+"px";
      area.style.top = y+"px";
      zoom.style.backgroundPosition = `${-(x / boxWidth * bgWidth)}px ${-(y / boxHeight * bgHeight)}px`;
    }
    const move = (event) => {
      setAreaPosition(event);
    }
    box.addEventListener("mouseenter",enter)
  </script>
</body>
</html>

以上就是js實現(xiàn)圖片局部放大鏡效果的示例代碼的詳細內(nèi)容，更多關(guān)于js圖片局部放大鏡的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

  • JavaScript實現(xiàn)快速排序的方法

    JavaScript實現(xiàn)快速排序的方法

    這篇文章主要介紹了JavaScript實現(xiàn)快速排序的方法,實例分析了javascript快速排序的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-07-07
  • Javascript檢查圖片大小不要讓大圖片撐破頁面

    Javascript檢查圖片大小不要讓大圖片撐破頁面

    用Javascript判斷圖片大小，其實只要寫一個簡單的函數(shù)就可以了，使用其他語言進行判斷，過程比較復(fù)雜，用 Javascript 判斷輕松搞定
    2014-11-11
  • js實現(xiàn)右鍵菜單功能

    js實現(xiàn)右鍵菜單功能

    這篇文章主要為大家詳細介紹了js實現(xiàn)右鍵菜單功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-11-11
  • js正則表達式中test,exec,match方法的區(qū)別說明

    js正則表達式中test,exec,match方法的區(qū)別說明

    本篇文章主要是對js正則表達式中test,exec,match方法的區(qū)別進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
    2014-01-01
  • Bootstrap每天必學之警告框插件

    Bootstrap每天必學之警告框插件

    Bootstrap每天必學之警告框插件,使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能，感興趣的小伙伴們可以參考一下
    2016-04-04
  • 小程序?qū)崿F(xiàn)計時器小功能

    小程序?qū)崿F(xiàn)計時器小功能

    這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)計時器小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-09-09
  • js實現(xiàn)右鍵彈出自定義菜單

    js實現(xiàn)右鍵彈出自定義菜單

    這篇文章主要為大家詳細介紹了js實現(xiàn)右鍵彈出自定義菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • js css3實現(xiàn)圖片拖拽效果

    js css3實現(xiàn)圖片拖拽效果

    這篇文章主要為大家詳細介紹了js css3實現(xiàn)圖片拖拽效果，注釋非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • 談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)

    談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)

    這篇文章主要介紹了談?wù)勎覍avaScript原型和閉包系列理解(隨手筆記9)的相關(guān)資料,需要的朋友可以參考下
    2015-12-12
  • Javascript 中介者模式實例

    Javascript 中介者模式實例

    在頁面上，用戶會有很多的操作 ，每進行一次操作我們需要去展示操作的結(jié)果，在這里我們有了一個問題，我們應(yīng)如何去展示不同的結(jié)果呢？
    2009-12-12

最新評論