zoukankan      html  css  js  c++  java
  • 克隆

    克隆:
                            obj.cloneNode();//是否深度克隆;true:深度克隆,
                            删除一个属性:obj.removeAttribute('属性名');
                                window.onload=function(){
                                        var oBox=document.getElementById("box");
                                        var oBtn=document.getElementById("btn");
                                        oBtn.onclick=function(){
                                                    var oNewDiv=oBox.cloneNode(true);//true为深度克隆(根据oBox克隆),括号里默认为false
                                                    oNewDiv.removeAttribute('id');//移出id属性
                                                    document.body.appendChild(oNewDiv);
                                        }
                                }

    带框拖拽:
                                window.onload=function(){
                                                var oBox=document.getElementById("box");
                                                oBox.onmousedown=function(ev){
                                                                var e=ev||event;
                                                                var disX=e.clientX-oBox.offsetLeft;
                                                                var disY=e.clientY-oBox.offsetTop;
                                                                var oNewDiv=oBox.cloneNode(true); //深度克隆出类似oBox的div
                                                                oNewDiv.removeAttribute('id');//删除新div的id属性
                                                                oNewDiv.className='newDiv';
                                                                oNewDiv.style.width=oBox.offsetWidth+'px';//新div的大小等于oBox的大小
                                                                oNewDiv.style.height=oBox.offsetHeight+'px';
                                                                oNewDiv.style.left=oBox.offsetLeft+'px';//新div的初始位置在oBox的位置
                                                                oNewDiv.style.top=oBox.offsetTop+'px';
                                                                oBox.parentNode.appendChild(oNewDiv);//新div添加到oBox的父级
                                                                document.onmousemove=function(ev){
                                                                                var e=ev||event;
                                                                                var l=e.clientX-disX; //获取新位置
                                                                                var t=e.clientY-disY;
                                                                                oNewDiv.style.left=l+'px';  //新div跟着鼠标走
                                                                                oNewDiv.style.top=t+'px';
                                                                }
                                                               document.onmouseup=function(){
                                                                                document.onmousemove=null;
                                                                                document.onmouseup=null;
                                                                                oBox.style.left=oNewDiv.offsetLeft+'px';  //鼠标抬起后oBox来到新div的位置,同时新div消失
                                                                                oBox.style.top=oNewDiv.offsetTop+'px';
                                                                                oBox.parentNode.removeChild(oNewDiv);
                                                                                oBox.releaseCapture&&oBox.releaseCapture();
                                                                }
                                                              oBox.setCapture&&oBox.setCapture();
                                                              return false;
                                                   }
                                                       document.oncontextmenu=function(){
                                                             return false;
                                                       } //阻止右键菜单
                                            }

  • 相关阅读:
    transform 多值先后执行顺序
    css 清除浮动
    鼠标移动到图片,图片放大
    js 事件循环机制EventLoop
    web安全
    web前端踩坑记录
    滚动加载图片(懒加载)
    css 兼容问题
    模块化 AMD与CMD 规范
    css 盒子模型 ie盒子模型
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698679.html
Copyright © 2011-2022 走看看