JS：原始JS实现复制，移动，缩放

最新推荐文章于 2023-03-13 10:40:03 发布
最新推荐文章于 2023-03-13 10:40:03 发布
阅读量298 收藏 2
点赞数
分类专栏： # 语言 文章标签： 原生JS 实现复制 移动 缩放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42146775/article/details/102546207
版权
效果如下

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style type="text/css">

        * {
            margin: 0;
            padding: 0
        }


        /*四边*/
        .box .t,
        .box .b,
        .box .l,
        .box .r {
            position: absolute;
            z-index: 1;
            background:#666;
        }

        .box .l,
        .box .r {
            width: 10px;
            height: 100%;
            cursor: col-resize;
        }

        .box .t,
        .box .b {
            width: 100%;
            height: 10px;
            cursor: row-resize;
        }

        .box .t {
            top: 0;
        }

        .box .b {
            bottom: 0;
        }

        .box .l {
            left: 0;
        }

        .box .r {
            right: 0;
        }

        /*四角*/
        .box .tl,
        .box .bl,
        .box .br,
        .box .tr {
            width: 20px;
            height: 20px;
            position: absolute;
            background: #CCC;
            z-index: 2;
            cursor: nwse-resize
        }

        .box .tl,
        .box .bl {
            left: -5px;
        }

        .box .tr,
        .box .br {
            right: -5px;
        }

        .box .br,
        .box .bl {
            bottom: -5px;
        }

        .box .tl,
        .box .tr {
            top: -5px;
        }

        .box .tr,
        .box .bl {
            cursor: nesw-resize;
        }

        /*图片*/
        img {
            width: 100%;
            height: 100%;
        }


        .box {
            background:orange;
            width: 60px;
            height: 60px;
            position: absolute;

            cursor: move;
            top: 100px;
            left: 100px;
        }


        .Sample {
            background: #f00;
            width: 60px;
            height: 60px;
            position: absolute;
            opacity: 0.5;
            cursor: move;
        }
    </style>
    <script>
        var allowmove = false;
        var allowcopy = false;
        var allowdrag = false;
        var diffX, diffY;

        var fordargcancel;
        function dragFn(obj,box) {
            obj.onmousedown = function (ev) {
          
                var oEv = ev || event;
                var oldX = oEv.clientX;
                var oldY = oEv.clientY;
                var oldWidth = box.offsetWidth;
                var oldHeight = box.offsetHeight;

                var oldLeft = box.offsetLeft;
                var oldTop = box.offsetTop;

                document.onmousemove = function (ev) {
            
                    var oEv = ev || event;

                    if (obj.className == 'tl') {
                        box.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                        box.style.height=oldHeight-(oEv.clientY-oldY)+'px';
                        box.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                        box.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                    }
                    else if (obj.className == 'bl') {
                        box.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                        box.style.height=oldHeight+(oEv.clientY-oldY)+'px';
                        box.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                        box.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                    }
                    else if (obj.className == 'tr') {
                        box.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                        box.style.height = oldHeight - (oEv.clientY - oldY)+'px';
                        box.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                        box.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                    }
                    else if (obj.className == 'br') {
                        box.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                        box.style.height = oldHeight + (oEv.clientY - oldY)+'px';
                        box.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                        box.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
                    }
                    else if (obj.className == 't') {
                        box.style.height=oldHeight-(oEv.clientY-oldY)+'px';
                        box.style.top = oldTop + (oEv.clientY - oldY) + 'px';
                    }
                    else if (obj.className == 'b') {
                        box.style.height = oldHeight + (oEv.clientY - oldY)+'px';
                        box.style.bottom = oldTop - (oEv.clientY + oldY) + 'px';
                    }
                    else if (obj.className == 'l') {
                        oDiv.style.height = oldHeight + 'px';
                        oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
                        oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px';
                    }
                    else if (obj.className == 'r') {
                        box.style.height = oldHeight + 'px';
                        box.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
                        box.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
                    }
                };

                document.onmouseup = function () {
                    document.onmousemove = DOMmove;
                    document.onmouseup=DOMup;
                };
                return false;
            };
        }
        window.onload=function(e) {

            document.addEventListener("mousemove",DOMmove);
            document.addEventListener("mouseup",DOMup);
            document.addEventListener("mousedown",DOMdown);

        }

        function DOMup(e) {
            // 禁止拖动


            if (allowcopy) {




                e.target.removeAttribute("id");


                allowmove = false;
                allowdrag = false;
                allowcopy = false;
           
            }
            if (allowmove) {
                e.target.removeAttribute("id");
			
                allowmove = false;
                allowcopy = false;
                allowdrag = false;
               
            }
            if(allowdrag)
            {

      
         
                allowmove = false;
                allowcopy = false;
                allowdrag = false;
            }

        }
        function DOMmove(e) {




            // 移动，更新 box 坐标
            if (allowmove) {
                var mb = document.getElementById("moving_box");
                mb.style.top = e.pageY - diffY + 'px';
                mb.style.left = e.pageX - diffX + 'px';

            }

            if (allowcopy) {
                var cb = document.getElementById("copy_box");
                cb.style.top = e.pageY - diffY + 'px';
                cb.style.left = e.pageX - diffX + 'px';

            }

        }
        function DOMdown(e) {
         
            if (e.target.tagName.match(/SPAN/)) {
                fordargcancel=e.target.parentNode;
              
                allowdrag=true;
            }
            if (e.target.className.match(/box/)) {
              
console.log(e.target);
                allowmove = true;

                e.target.id = "moving_box";


                // 计算坐标差值
                diffX = e.pageX - e.target.offsetLeft;
                diffY = e.pageY - e.target.offsetTop;
            }
            if (e.target.className.match(/Sample/)) {

                allowcopy = true;
                //复制一份再移动
                var box=document.getElementsByClassName("box")[0].cloneNode();
                var r=document.getElementsByClassName("r")[0].cloneNode();
                var l=document.getElementsByClassName("l")[0].cloneNode();
                var t=document.getElementsByClassName("t")[0].cloneNode();
                var b=document.getElementsByClassName("b")[0].cloneNode();
                var br=document.getElementsByClassName("br")[0].cloneNode();
                var bl=document.getElementsByClassName("bl")[0].cloneNode();
                var tr=document.getElementsByClassName("tr")[0].cloneNode();
                var tl=document.getElementsByClassName("tl")[0].cloneNode();
                box.appendChild(r);box.appendChild(l);box.appendChild(t);box.appendChild(b);
                box.appendChild(br);box.appendChild(bl);box.appendChild(tr);box.appendChild(tl);
                box.id="copy_box";
                box.style.display="block";
                document.body.appendChild(box);
				 var aSpan =box.getElementsByTagName('span');
                for (var i = 0; i < aSpan.length; i++)
                    dragFn(aSpan[i],box);
                // 计算坐标差值
                diffX = e.pageX - e.target.offsetLeft;
                diffY = e.pageY - e.target.offsetTop;
            }
        }

    </script>
</head>
<body>

<BR>
<div class="Sample" >

</div>
<BR>	<BR>	<BR>	<BR>	<BR>

<hr style="height:1px;border:none;border-top:1px dashed #0066CC;" />   
<br>
<div class="box" style="display:none">
    <span class="r"></span>
    <span class="l"></span>
    <span class="t"></span>
    <span class="b"></span>
    <span class="br"></span>
    <span class="bl"></span>
    <span class="tr"></span>
    <span class="tl"></span>
</div>
<br><br><br><br>
</body>
</html>
yilyil
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
原生JS实现复制功能
Marco_30的博客
03-13 290
第一步 引入第三方clipboard.min.js包 第二步 对对象进行操作的方式方法有两种可以选择： data-clipboard-action=“copy”； data-clipboard-action=“cut”； 第三步 data-clipboard-target=“input” //这个对象可以是 #id，也可以类选择器 .class ，也可以是元素等 然后实例化 Clipboard 对象： var clipboard = new Clipboard(“input”); ##代码示
原生js实现拖拽移动与缩放效果
10-14
在JavaScript中，实现拖拽移动和缩放效果是常见的交互设计需求，特别是在开发网页应用时。下面我们将详细探讨如何利用原生JS实现这两个功能。 首先，我们从拖拽移动开始。拖拽移动的基本思路是监听鼠标按下...
基于原生JS的复制粘贴功能
weixin_42436131的博客
05-07 391
基于原生JS的复制粘贴功能代码 代码 const input = document.createElement('input'); input.setAttribute('readonly', 'readonly'); // 设置成只读 input.setAttribute('value', `你想要复制粘贴的内容`); document.body.appendChild(input);...
js-原生复制
jieweiwujie的博客
08-30 174
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>APP/PC</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/> ...
js实现原生复制粘贴功能
lmyh1111的博客
12-08 680
实现复制粘贴功能，点击复制，然后就就可以复制到指定的文本，然后就可以任意粘贴了！ <span slot="shortLink" slot-scope="text, record"> {{ record.shortLink }} <a @click="onCopy(record.shortLink)">复制</a> </span> onCopy(shortLink) { let inputElement = .
js原生复制功能
最新发布
weixin_44707050的博客
03-13 236
思路 ： 创建一个input元素 ，设置为readonly可读 ， 给input赋值 ， 添加到body中；选中这个input ， 执行浏览器复制命令， 设置样式隐藏 ， 复制完后，可根据个人需求 添加文本提示；
JavaScript实现拖拽和缩放效果
10-14
当鼠标按下时记录起始位置，然后在鼠标移动时计算缩放比例，根据比例调整元素的宽度和高度，同时保持其原始宽高比。为防止元素尺寸过小，设置了最小宽度和高度限制。缩放后，容器(`#box`)的大小也会相应调整，以容纳...
小程序实现图片移动缩放效果
10-15
在小程序开发中，实现图片移动...总之，小程序实现图片移动缩放效果涉及触摸事件的监听、坐标计算以及边界检查等多个技术点。通过合理的逻辑处理和良好的用户体验设计，可以让用户在小程序中更加便捷地操作和查看图片。
图片缩放旋转移动javascript
02-22
"image实现"可能是指具体的图片元素及其相关的JavaScript处理代码，而"放大缩小移动"则是这个项目的核心功能，可能分布在不同的JS或jQuery函数中。 总结来说，这个项目提供了使用JavaScript和jQuery进行图片缩放、...
zoomPan.js:放大、移动查看图片(alpha)
05-14
为此，开发者们创造了许多JavaScript库来实现图片的放大、移动等功能，ZoomPan.js就是其中的一个优秀实例。本文将深入探讨ZoomPan.js的功能、使用方法以及其实现原理。 ZoomPan.js是一款轻量级的JavaScript组件，它...
js原生实现复制
weixin_43660626的博客
11-13 255
copyCode: function (val,e) { let input = document.createElement('input'); input.setAttribute('readonly', 'readonly');//可设可不设 input.setAttribute('value', val); document...
JS原生复制功能
weixin_54902466的博客
11-18 343
js原生复制功能
【JS】原生js实现复制功能
u011279583的博客
09-16 233
主要原理： 1.设定选中内容， 2.调用document.execCommand(“Copy”); 细节： 1.复制input内容 input的dom对象调用select()方法 // 以下为vue代码 <text-input ref="url" type="text" name='url'</text-input> <b-button @click="copyBtnClickEvent">lalalala</b-button> copyUrlBtnClickE
js实现复制粘贴功能
一个兢兢业业的programmer
08-19 1035
最近写微信小程序，写到了复制粘贴功能，微信官方提供了接口很好用，但是在js端接口并没有那么简单易懂。有一个js插件将原生复制js封装了起来，大小只有3kb十分好用。这个是clipboard.js的官方网址。接口内容简单易懂。  ...
原生js实现复制功能
小白菜
02-18 326
Html (以下style为了 不显示输入框) <input id="copytext" value='' style=" position: fixed; width: 5px; top: -6px; height: 6px;"readonly /> JS function copyTest(){ var input = document.getElementById("copytext"); .
通过原生js实现复制文本
wkq_1212的博客
05-30 826
以前复制这东西都是通过flash，包括现在很多网站仍然在使用，一点击复制就提示您未安装flash插件，这个就多少有点不爽了。其实js也可以实现复制纯文本，是指需要借助input标签，如下：//复制网站地址 copyUrl () { let oInput = document.createElement('input') // 生成一个节点 oInput....
原生 js 实现复制文本
听胡说
01-03 160
html:账号：123456，密码：123457js: var text = document.getElementById("copyText").innerText; var input = document.getElementById("copyInput"); document.getElementById("copyInput").value = text; // 修改文本框...
原生JS实现实时放大功能：京东商品图片查看效果
本文主要介绍了如何使用原生JavaScript实现京东商品查看时的放大功能，通过JavaScript、CSS和HTML结合实现一个简单的图片查看器。以下将详细解析需求分析、HTML结构、CSS样式和JavaScript代码的关键部分。 **需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yilyil

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值