国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

js 以鼠標(biāo)滾輪位置為中心縮放、放大以及邊界判斷

2年前作者：peng_fishing分類：Toy博客閱讀(89)違法舉報

這篇具有很好參考價值的文章主要介紹了js 以鼠標(biāo)滾輪位置為中心縮放、放大以及邊界判斷。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

前言

項目需求為頁面上實現(xiàn)拖拽節(jié)點和可以在頁面中通過滑動滾輪來縮放節(jié)點顯示（以鼠標(biāo)位置為縮放中心點）從而放大到可以看到詳細(xì)的信息，節(jié)點有10000個。特此記錄下實現(xiàn)細(xì)節(jié)

效果圖

js 以鼠標(biāo)滾輪位置為中心縮放、放大以及邊界判斷

js

初始化變量

    const container = document.querySelector('.container');
    const ul = document.querySelector('.ul');
    // 變量
    let result,
        x = 0,
        y = 0,
        scale = 1,
        ulWidth = 1500,
        ulHeight = 1200,
        minScale = 1,
        maxScale = 4,
        isDown = false, // 按下標(biāo)識
        diff = { x: 0, y: 0 }, // 相對于上一次lastPointermove移動差值
        lastPointermove = { x: 0, y: 0 }; // 用于計算diff
    ul.style.width = ulWidth + 'px';
    ul.style.height = ulHeight + 'px';
    ul.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';

為節(jié)點綁定拖拽事件，拖拽事件的邊界使用Math進(jìn)行判斷，比起if判斷更加清晰快捷。

鼠標(biāo)抬起采用document全局判斷，避免鼠標(biāo)移動到節(jié)點外未觸發(fā)鼠標(biāo)抬起事件

 // 綁定鼠標(biāo)點擊
    ul.addEventListener('mousedown', function (e) {
        e.preventDefault();
        e.stopPropagation();
        isDown = true;
        lastPointermove = { x: e.clientX, y: e.clientY };

    });
    // 綁定鼠標(biāo)移動
    ul.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (isDown) {
            const current1 = { x: e.clientX, y: e.clientY };
            diff.x = current1.x - lastPointermove.x;
            diff.y = current1.y - lastPointermove.y;
            lastPointermove = { x: current1.x, y: current1.y };
            x += diff.x;
            y += diff.y;
            //邊界判斷
            let offsetX = Math.min(Math.max(x, ulWidth - ulWidth * (scale + 1) / 2), + ulWidth * (scale - 1) / 2);
            let offsetY = Math.min(Math.max(y, ulHeight - ulHeight * (scale + 1) / 2), + ulHeight * (scale - 1) / 2);
            ul.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
        }

    });
    // 綁定鼠標(biāo)抬起
    document.addEventListener('mouseup', () => {
        isDown = false;
    })

滾輪縮放、放大邏輯

X軸的(window.innerWidth - ulWidth) * 0.5)主要判斷節(jié)點距離左邊邊距，y軸同樣

同樣采用Math判斷邊界

ul.addEventListener('wheel', function (e) {
        let ratio = 1.1;
        // 縮小
        if (e.deltaY > 0) {
            ratio = 1 / 1.1;
        }
        // 限制縮放倍數(shù)
        const onscale = scale * ratio;
        if (onscale > maxScale) {
            ratio = maxScale / scale;
            scale = maxScale;
        } else if (onscale < minScale) {
            ratio = minScale / scale;
            scale = minScale;
        } else {
            scale = onscale;
        }
        const origin = {
            x: (ratio - 1) * ulWidth * 0.5,
            y: (ratio - 1) * ulHeight * 0.5
        };
        // 計算偏移量
        x -= (ratio - 1) * (e.clientX - x - (window.innerWidth - ulWidth) * 0.5) - origin.x;
        y -= (ratio - 1) * (e.clientY - y) - origin.y;
        let offsetX = Math.min(Math.max(x, ulWidth - ulWidth * (scale + 1) / 2), ulWidth * (scale - 1) / 2);
        let offsetY = Math.min(Math.max(y, ulHeight - ulHeight * (scale + 1) / 2), + ulHeight * (scale - 1) / 2);
        x = offsetX;
        y = offsetY;
        ul.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;

    });

總結(jié)

自此功能開發(fā)完畢，使用原生方法實現(xiàn)也是加深對js的理解，基本上js上面能實現(xiàn)的移植到React、Vue也是一樣的道理。小弟才疏學(xué)淺，大佬們見笑了，有幫到你的小伙伴可以點個贊，謝謝。

全部代碼文章來源地址http://www.zghlxwxcb.cn/news/detail-511637.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }
    .main {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    ul {
        width: 1500px;
        height: 1200px;
        background-color: antiquewhite;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        margin: 0;
        padding: 0;
    }
    li {
        width: 100px;
        height: 80px;
        background-color: orange;
        margin-right: 20px;
    }
    li:nth-child(12n) {
        margin-right: 0px;
    }

    li:hover {
        background-color: darkblue;
    }
    .container {
        position: relative;
        width: 1500px;
        height: 1200px;
        overflow: hidden;
    }
</style>
<body>
    <div class="main">
        <div class="container">
            <ul class="ul">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

        </div>
    </div>
</body>
<script>
    const container = document.querySelector('.container');
    const ul = document.querySelector('.ul');
    // 變量
    let result,
        x = 0,
        y = 0,
        scale = 1,
        ulWidth = 1500,
        ulHeight = 1200,
        minScale = 1,
        maxScale = 4,
        isDown = false, // 按下標(biāo)識
        diff = { x: 0, y: 0 }, // 相對于上一次lastPointermove移動差值
        lastPointermove = { x: 0, y: 0 }; // 用于計算diff
    ul.style.width = ulWidth + 'px';
    ul.style.height = ulHeight + 'px';
    ul.style.transform = 'matrix(1, 0, 0, 1, 0, 0)';

    // 拖拽查看
    // 綁定鼠標(biāo)點擊
    ul.addEventListener('mousedown', function (e) {
        e.preventDefault();
        e.stopPropagation();
        isDown = true;
        lastPointermove = { x: e.clientX, y: e.clientY };
    });
    // 綁定鼠標(biāo)移動
    ul.addEventListener('mousemove', function (e) {
        e.preventDefault();
        e.stopPropagation();
        if (isDown) {
            const current1 = { x: e.clientX, y: e.clientY };
            diff.x = current1.x - lastPointermove.x;
            diff.y = current1.y - lastPointermove.y;
            lastPointermove = { x: current1.x, y: current1.y };
            x += diff.x;
            y += diff.y;
            //邊界判斷
            let offsetX = Math.min(Math.max(x, ulWidth - ulWidth * (scale + 1) / 2), + ulWidth * (scale - 1) / 2);
            let offsetY = Math.min(Math.max(y, ulHeight - ulHeight * (scale + 1) / 2), + ulHeight * (scale - 1) / 2);
            ul.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;
        }
    });
    // 綁定鼠標(biāo)抬起
    document.addEventListener('mouseup', () => {
        isDown = false;
    })

    // 滾輪縮放、放大邏輯
    ul.addEventListener('wheel', function (e) {
        // e.preventDefault();
        let ratio = 1.1;
        // 縮小
        if (e.deltaY > 0) {
            ratio = 1 / 1.1;
        }
        // 限制縮放倍數(shù)
        const onscale = scale * ratio;
        if (onscale > maxScale) {
            ratio = maxScale / scale;
            scale = maxScale;
        } else if (onscale < minScale) {
            ratio = minScale / scale;
            scale = minScale;
        } else {
            scale = onscale;
        }
        const origin = {
            x: (ratio - 1) * ulWidth * 0.5,
            y: (ratio - 1) * ulHeight * 0.5
        };
        // 計算偏移量
        x -= (ratio - 1) * (e.clientX - x - (window.innerWidth - ulWidth) * 0.5) - origin.x;
        y -= (ratio - 1) * (e.clientY - y) - origin.y;
        let offsetX = Math.min(Math.max(x, ulWidth - ulWidth * (scale + 1) / 2), ulWidth * (scale - 1) / 2);
        let offsetY = Math.min(Math.max(y, ulHeight - ulHeight * (scale + 1) / 2), + ulHeight * (scale - 1) / 2);
        x = offsetX;
        y = offsetY;
        ul.style.transform = `matrix(${scale}, 0, 0, ${scale}, ${offsetX}, ${offsetY})`;

    });
</script>

</html>

到了這里，關(guān)于js 以鼠標(biāo)滾輪位置為中心縮放、放大以及邊界判斷的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進(jìn)行投訴反饋，一經(jīng)查實，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費用

vue - 【讓一張圖片可以拖動】鼠標(biāo)點擊拖曳拖拽圖片及鼠標(biāo)滾輪放大縮小功能實現(xiàn)，讓一張圖片圖像在頁面內(nèi)可以任意拖動拖曳及鼠標(biāo)滾輪可以縮放控制大小功能效果（完整實例源碼，一鍵復(fù)制開箱即用！）
在vue網(wǎng)頁h5項目開發(fā)中，實現(xiàn)一個圖片圖像可用鼠標(biāo)拖曳拖拽位置，并且用鼠標(biāo)滾輪可以放大縮小圖片。一鍵復(fù)制代碼，開箱即用。找個頁面，復(fù)制粘貼。
2024年02月13日
瀏覽(94)
QT學(xué)習(xí)筆記（三）——vs2019+Qt實現(xiàn)打開影像并以鼠標(biāo)為中心用滾輪控制圖片縮放
之前寫了一個博客講怎么顯示一張影像，那個是基于Qpainter的今天使用QLabel來顯示影像，并且用鼠標(biāo)滾輪控制縮放。關(guān)于圖像的打開和顯示，主要參考這個博客關(guān)于如何使圖片自適應(yīng)窗口與鋪滿窗口，可以參考這個博客。這兩個博客出自同一作者，都很詳細(xì)。其中按照第二
2024年02月09日
瀏覽(27)
js實現(xiàn)鼠標(biāo)滾輪放大縮小頁面指定區(qū)域(css3 scale)
一、需求鼠標(biāo)滾輪在紅色邊框區(qū)域內(nèi)向上滾動:綠色邊框盒子里所有元素縮小。鼠標(biāo)滾輪在紅色邊框區(qū)域內(nèi)向下滾動:綠色邊框盒子里所有元素放大。點擊還原按鈕:綠色盒子里所有元素還原為初始值。二、相關(guān)知識點 1、CSS3 Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個屬性允許
2024年02月11日
瀏覽(98)
js使用canvas實現(xiàn)圖片鼠標(biāo)滾輪放大縮小拖拽預(yù)覽，顯示像素坐標(biāo)，顯示像素值
todo 實現(xiàn)畫矩形框，圓形roi
2024年04月11日
瀏覽(89)
Unity2D 實現(xiàn)UGUI滾動鼠標(biāo)滑輪以鼠標(biāo)位置點為中心縮放圖片
?先放參考文章： Unity3d UGUI以鼠標(biāo)位置點為中心縮放圖片（含項目源碼） https://blog.csdn.net/qq_33789001/article/details/117749837 再放實現(xiàn)效果：說說事情緣由，項目需要用到這個效果，所以上網(wǎng)找了個參考文章，后來不知道為什么失效了，所以想著自己改改，看看是什么毛病。貼原
2024年02月11日
瀏覽(20)
QT編寫實現(xiàn)圖片的幻燈片播放、自適應(yīng)顯示、縮放（以鼠標(biāo)位置為中心進(jìn)行縮放）、拖動、重置、顯示鼠標(biāo)位置像素坐標(biāo)及RGB值、播放GIF動畫、截圖保存、批量保存、拖入文件夾遍歷所有文件
這個圖片查看器功能很多，是我花了不少心思，不斷優(yōu)化，不斷添加功能的成果： 1.能打開并顯示所有常用圖片格式文件，顯示鼠標(biāo)位置像素坐標(biāo)及RGB值 2.能縮放，拖動圖片，可以以鼠標(biāo)為中心滾動滾輪進(jìn)行縮放 3.右擊可彈出菜單欄，菜單包括：適應(yīng)寬度，適應(yīng)窗口，原圖大
2024年02月10日
瀏覽(39)
Pyqt通過鼠標(biāo)滾輪進(jìn)行縮放界面
大多數(shù)視圖類和一部分控件應(yīng)該都有wheelEvent（）函數(shù) 首先定義變量，這里為了縮小和放大的比例相同，縮小倍數(shù)為1除以放大倍數(shù)。重寫wheelEvent函數(shù)。這里的event對象是個QWheelEvent事件對象。 ?event.angleDelta()返回一個Qpoint對象，代表滾動的數(shù)值。單位是8分之一度。轉(zhuǎn)一下一
2024年02月12日
瀏覽(87)
canvas實現(xiàn)鼠標(biāo)滾輪滾動縮放畫布
canvas實現(xiàn)鼠標(biāo)滾輪滾動縮放畫布效果
2024年02月04日
瀏覽(100)
Pycharm-用鼠標(biāo)滾輪放大縮小字體大小
1，pycharm 字體放大設(shè)置： ①，F(xiàn)ile — setting — Keymap —在搜尋框中輸入：increase — Increase Font Size（雙擊） — 在彈出的對話框中選擇Add Mouse Shortcut ②，在彈出的對話框中按住ctrl 鍵，鼠標(biāo)滾輪向上滑動后點擊 OK 。 2，Pycharm 字體縮小設(shè)置： ①，F(xiàn)ile — setting — Keymap —在搜尋框
2024年02月12日
瀏覽(35)
IDEA設(shè)置鼠標(biāo)滾輪自由放大縮小字體
IDEA中可以設(shè)置【按住Ctrl鍵+鼠標(biāo)滾輪】自由調(diào)節(jié)某個工作窗口的放大和縮?。?打開?IDEA的Settings - Editor - Genral，勾選 “Change font size with Ctrl+Mouse Wheet”。然后就可以通過快捷鍵Ctrl+鼠標(biāo)滾輪來放大或縮小工作窗口中的內(nèi)容了。該操作對控制臺同樣有效。
2024年02月05日
瀏覽(92)