这个js脚本可实现用鼠标随意拖动图层效果,这里有两种效果供您选择,有一种拖动效果带有还原功能。
<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>可拖动图层自动还原js特效_武鸣人</title> <style type="text/css"> *{padding:0px auto;margin:0px auto;} body{font-size:12px;font-family:宋体;} .wuming_ren{width:100px;height:100px;border:1px solid red;float:left;background:#fff} .www_wuming_ren{width:100px;height:100px;border:1px solid red;float:right;background:#fff} </style> <script language="javascript"> function wuming_ren(){ var objthis=this; this.x=null; this.y=null; this.xx=null; this.yy=null; this.xxx=null; this.yyy=null; this.obja=null; this.co=null; this.t=null; document.onmousemove=function(){ try{objthis.x=arguments[0].screenX;objthis.y=arguments[0].screenY;} catch(err){objthis.x=window.event.x;objthis.y=window.event.y;} } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) wuming_ren.prototype.create=function(a,b){ if(this.obja==null){ this.co=b; var objthis=this; this.obja=a; this.obja.onmouseup=function(){objthis.up()} this.xx=this.x; this.yy=this.y; this.xxx=this.obja.offsetLeft; this.yyy=this.obja.offsetTop; this.obja.style.position="absolute"; this.move(); } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) wuming_ren.prototype.move=function(){ var objthis=this; var x=this.xxx + this.x - this.xx; var y=this.yyy + this.y - this.yy; this.obja.style.left = x + "px"; this.obja.style.top = y + "px"; this.t=setTimeout(function(){objthis.move()},1) }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) wuming_ren.prototype.up=function(){ clearTimeout(this.t) if(this.co==1){ this.obja.style.left = this.xxx + "px"; this.obja.style.top = this.yyy + "px"; } this.xxx=null; this.yyy=null; this.obja=null; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) var cc1=new wuming_ren(); </script> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div class="wuming_ren" onmousedown="cc1.create(this,1)">还原式拖动</div> <div class="www_wuming_ren" onmousedown="cc1.create(this)">不还原式拖动</div> </body> </html>
本文来自武鸣人网站,转载请注明出处