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;
                                                       } //阻止右键菜单
                                            }

  • 相关阅读:
    201771010134杨其菊《面向对象程序设计(java)》第十三周学习总结
    201771010107-冯志霞 实验四 软件项目案例分析
    201771010107-冯志霞 实验三 结对项目——《西北师范大学疫情防控信息系统》项目报告
    201771010107-冯志霞 实验二 个人项目-《西北师范大学学生疫情上报系统》项目报告
    201771010107 冯志霞 实验一 软件工程准备
    冯志霞201771010107《面向对象程序设计(java)》第十八周学习总结
    冯志霞201771010107《面向对象程序设计(java)》第十七周学习总结
    冯志霞201771010107《面向对象程序设计(java)》第十六周学习总结
    冯志霞201771010107《面向对象程序设计(java)》第十五周学习总结
    冯志霞201771010107《面向对象程序设计(java)》第十四周学习总结
  • 原文地址:https://www.cnblogs.com/yang0902/p/5698679.html
Copyright © 2011-2022 走看看