js实现图片拖拽与缩放,源码

硅谷探秘者 Md 前端,javascript 359 0 0

下方的代码包括html,css,javascript。可直接复制到本地文件测试。如果引用的图片无法访问,请替换图片连接。

<!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>图片拖拽与缩放</title>
    <style>
        #content{
        }
    </style>
</head>
<body>
<div id="content">
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    <img class="imgs" src="https://img0.baidu.com/it/u=580921286,1214064928&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500"><br>                       <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the <br>efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    <img class="imgs" src="https://img1.baidu.com/it/u=403163518,2135282784&fm=253&fmt=auto&app=138&f=JPEG?w=913&h=393"><br>                       <br>
        China's latest emphasis on nurturing new quality productive forces as well as<br> the efficient policies introduced during the annual sessi<br>ons of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                   <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>                                                           <br>
    China's latest emphasis on nurturing new quality productive forces as well as the<br> efficient policies introduced during the annual sessions <br>of the country's top legislative and political advisory bodies are boosting confidence among multinational companies.<br>
</div>
</body>
<!-- <script src="./daz.js"></script> -->
<script>
function createCurtain(){
    const curtain = document.createElement('div');
    curtain.style.top = "0px";
    curtain.style.left = "0px";
    curtain.style.position = "fixed";
    curtain.style.backgroundColor = "rgba(255, 255, 255, 0)";
    curtain.style.width = "100%";
    curtain.style.height = "100%";
    curtain.style.display = "none";
    curtain.style.transition = "background-color 0.4s ease";
    // 获取 <body> 元素
    const body = document.body;
    // 获取第一个子元素
    const firstChild = body.firstChild;
    // 在第一个子元素之前插入新的 <div> 元素
    body.insertBefore(curtain, firstChild);
    return curtain;
}
function dragAndZoom(content){
    var topOld = 0;
    var leftOld = 0;
    var width = 0;
    var height = 0;
    let curtain = createCurtain();
    let imgs = content.getElementsByTagName("img");
    for(var i=0;i<imgs.length;i++){
        imgs[i].onclick=function () {
            curtain.style.display="block";
            curtain.style.transition="background-color 0.4s ease";
            curtain.style.backgroundColor="rgba(0, 0, 0,0.9)";
            width = this.offsetWidth;
            height = this.offsetHeight;
            const myimage = document.createElement('img');
            myimage.height = this.offsetHeight;
            myimage.style.position = "fixed";
            myimage.style.zIndex = "2147483648";
            myimage.style.cursor = "grab";
            myimage.style.transitionProperty = "top, left, transform";
            myimage.style.transitionDuration = "0.4s";
            myimage.style.transform = "translate(0%,0%)";
            myimage.style.transitionTimingFunction = "ease-in-out;"
            myimage.setAttribute('draggable', 'true');
            myimage.id = "image";
            myimage.setAttribute("src",this.getAttribute("src"));
            document.body.style.overflow='hidden';
            curtain.appendChild(myimage);
            const rect = this.getBoundingClientRect();
            const topOffset = rect.top;
            const leftOffset = rect.left;
            topOld = topOffset;
            leftOld = leftOffset;
            myimage.style.top=topOffset+"px";
            myimage.style.left=leftOffset+"px";    
            zoom(myimage)
            imgMove(myimage);
            myimage.style.top = "50%";
            myimage.style.left = "50%";
            myimage.style.transform = "translate(-50%,-50%)";
        }    
    }
    curtain.onclick=function () {
        let image = document.getElementById("image");
        image.style.transitionProperty = "top, left, transform, height";
        image.style.transitionDuration = "0.4s";
        image.style.transitionTimingFunction = "ease-in-out;"
        image.height = height;
        image.style.transform = "translate(0%,0%)";
        image.style.top = topOld+"px";
        image.style.left = leftOld+"px";
        curtain.style.backgroundColor="rgba(255, 255, 255,0)";
        image.addEventListener('transitionend', ()=>{
            this.style.display="none";
            document.body.style.overflow=''
            curtain.innerHTML = '';
        })
    }
}
function imgMove(img) {
    const i = window.getComputedStyle(img);
    i.getPropertyValue('top');
    let tv = 0;
    let lv = 0;
    // 图片坐标信息
    let imgTop = 0;
    let imgLeft = 0;
    // 鼠标坐标信息
    let mx = 0;
    let my = 0;
    // 图片拖动开始前
    img.ondragstart = e => {
        img.style.transitionProperty  = "";
        img.style.transitionDuration  = "";
        img.style.transitionTimingFunction = ""
        // 初始化鼠标坐标信息
        mx = e.screenX;
        my = e.screenY;
        if (img.style.top === "50%") {
            // 初始化 图片坐标信息
            const imageStyles = window.getComputedStyle(img);
            tv = parseFloat(imageStyles.getPropertyValue('top'));
            lv = parseFloat(imageStyles.getPropertyValue('left'));
        }
    }
    // 图片拖动中
    img.ondrag = e => {
        if (e.screenY == 0 && e.screenX == 0) {
            return
        }
        imgTop = imgTop + e.screenY - my;
        imgLeft = imgLeft + e.screenX - mx;
        mx = e.screenX;
        my = e.screenY;
        img.style.top = imgTop+tv + "px";
        img.style.left = imgLeft+lv + "px";
    }
}
function zoom(myimage){
    var scrollFunc = function (e) {
        e = e || window.event;
        let height = myimage.height;
        if (e.wheelDelta) {             //IE Chrome Opera Safari
            if (e.wheelDelta > 0) {
                myimage.height = height + 20;
                e.stopPropagation();    //终止事件的进一步传播
            }
            if (e.wheelDelta < 0) {
                if(height < 100){
                    return;
                }
                myimage.height = height - 20;
                e.stopPropagation();
            }
        } else if (e.detail) {            //Firefox
            if (e.detail < 0) {
                myimage.height = height + 20;
                e.stopPropagation();    //终止事件的进一步传播
            }
            if (e.detail > 0) {
                if(height < 100){
                    return;
                }
                myimage.height = height - 20;
                e.stopPropagation();
            }
        }
    }
    if (myimage.addEventListener) {
        //addEventListener适用于版本较新的IE浏览器 ,如IE9以及火狐浏览器,
        myimage.addEventListener("mousewheel", scrollFunc, false);
        // Firefox浏览器使用的滚轮事件是 DOMMouseScroll
        myimage.addEventListener("DOMMouseScroll", scrollFunc, false);
    } else {
        myimage.attachEvent("onmousewheel", scrollFunc);
    }
}    
</script>
<script>
    window.onload = function(){
        let content = document.getElementById("content");
        dragAndZoom(content);
    }
</script>
</html>

评论区
请写下您的评论...
贾佳佳
不错,不错
2024-03-27T15:18:24
0
回复
猜你喜欢
html图片懒加载 1291 js懒加载lazyLoading.html测试页面
前端(h5) 1423 html纯js懒加载html纯js懒加载案例代下载地址:http://www.jiajiajia.club/file/info/JA67P0
java基础 1736 一.机器数和真值在学习原,反和补之前,需要先了解机器数和真值的概念.1、机器数一个数在计算机中的二进制表示形式,叫做这个数的机器数。机器数是带符号的,在计算机用一个数的最高位存
工具 2110 javaweb验证1.验证的作用:防止恶意破解密、刷票、论坛灌水、刷页。有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登录尝试,际上使用验证在很多网站通行的方
其他 802 式:Word,Excel,PowerPoint,Project,等office文档以及PDF文档。除了强大的文件操纵组件之外,Aspose.Total还提供了用于制、写电子邮件、拼写检查、创建条形
weblog 3405 使用 this.panel.BackgroundImage=global::WindowsFormsApplication2.Properties.Resources.one; 这样就给一个panel设置了背景
weblog 4939 前言之前的博客中提到了floyd最短路径算法,此算法的优点是,简单易懂,核心算法代只有5行,但是缺点是时间复杂度o(n3),时间复杂度太高。而下面要介绍的Dijkstra算法虽然设计上略有复杂,但
算法基础 1653 前端项目正式发布时一般需要混淆压js、css文件等,一方面压能够使文件体积更小,更多的节约网络io资,另一方面能避免被人读懂你的代!!!!!!工具可以使用uglifyjs2。安装通过npm安
归档
2018-11  12 2018-12  33 2019-01  28 2019-02  28 2019-03  32 2019-04  27 2019-05  33 2019-06  6 2019-07  12 2019-08  12 2019-09  21 2019-10  8 2019-11  15 2019-12  25 2020-01  9 2020-02  5 2020-03  16 2020-04  4 2020-06  1 2020-07  7 2020-08  13 2020-09  9 2020-10  5 2020-12  3 2021-01  1 2021-02  5 2021-03  7 2021-04  4 2021-05  4 2021-06  1 2021-07  7 2021-08  2 2021-09  8 2021-10  9 2021-11  16 2021-12  14 2022-01  7 2022-05  1 2022-08  3 2022-09  2 2022-10  2 2022-12  5 2023-01  3 2023-02  1 2023-03  4 2023-04  2 2023-06  3 2023-07  4 2023-08  1 2023-10  1 2024-02  1 2024-03  1 2024-04  1
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo vue 导入导出 软件使用 idea插件 协议 无聊的知识 jenkins springboot mqtt协议 keepalived minio mysql ensp 网络基础 xxl-job rabbitmq haproxy srs 音视频 webrtc javascript
目录
没有一个冬天不可逾越,没有一个春天不会来临。最慢的步伐不是跬步,而是徘徊,最快的脚步不是冲刺,而是坚持。