js面向对象练习(一):拖曳效果-创新互联
html:
成都创新互联于2013年开始,先为市中等服务建站,市中等地企业,进行企业商务咨询服务。为市中企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。js:
window.onload = function(){ var drag = new Drag("drag"); drag.init(); } //获取浏览器窗口宽度 function getInner(){ var pageWidth = window.innerWidth; var pageHeight = window.innerHeight; if(typeof pageWidth != "number"){ if(document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } return {width:pageWidth,height:pageHeight}; } //构造函数 function Drag(id){ this.obj = document.getElementById("drag"); this.disx = 0; this.disy = 0; } Drag.prototype.init = function(){ //this 指针 var me = this; this.obj.||event; me.onmouseDown(e); //阻止默认事件 return false; } } Drag.prototype.onmouseDown = function(e){ //this指针 var me = this; this.disx = e.clientX - this.obj.offsetLeft; this.disy = e.clientY - this.obj.offsetTop; document.||event; me.onmouseMove(e); } document.onmouseup = function(){ me.mouseUp(); } } Drag.prototype.onmouseMove = function (e){ //this指针 var lf = e.clientX - this.disx; var tp = e.clientY - this.disy; if(lf < 0){ //防止拖曳层超出左边界 lf = 0; }else if(lf > getInner().width - this.obj.offsetWidth){ lf = getInner().width - this.obj.offsetWidth;//防止拖曳层超出右边界 } if(tp < 0){ tp = 0;//防止拖曳层超出上边界 }else if(tp > getInner().height - this.obj.offsetHeight){ tp = getInner().height - this.obj.offsetHeight;//防止拖曳层超出下边界 } this.obj.style.left = lf + 'px'; this.obj.style.top = tp + 'px'; }; Drag.prototype.mouseUp = function (){ document.onmousemove = null; document.onmouseup = null; };
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享名称:js面向对象练习(一):拖曳效果-创新互联
标题路径:http://azwzsj.com/article/hiise.html