实用窗口拖拽代码,上面写原理,兼容性自己解决。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" /> <meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。以质量为核心,以实用为目的,全力打造一流网页特效站" /> <title>站长特效 实用窗口拖拽效果 站长特效网</title> <style type="text/css"> *{padding:0;margin:0;} #wrap{width:400px;margin:50px 0 0 50px;} #test{width:120px;height:120px;background:#080;position:absolute;left:500px;top:50px;z-index:100;} blockquote{background:#ddd;} </style> <script type="text/javascript"> window.onload=function(){ //声明变量 var obj=document.getElementById("test"); var drag=false; var difX=difY=0; //鼠标按下激活拖拽 obj.onmousedown=function(event){ obj.style.cursor="move"; obj.style.opacity=0.8; var event=event||window.event; drag=true; //获取鼠标相对于容器的left和top值 difX=event.clientX-obj.offsetLeft; difY=event.clientY-obj.offsetTop; return false; } //鼠标移动代码 obj.onmousemove=function(event){ if (!drag) return; var event=event||window.event; //获取拖动过程中的对象的left和top值 iL=event.clientX-difX; iT=event.clientY-difY; var maxL=document.documentElement.clientX-obj.offsetWidth; var maxT=document.documentElement.clientY-obj.offsetHeight; //界定移动的范围 iL = iL < 0 ? 0 : iL; iL = iL > maxL ? maxL : iL; iT = iT < 0 ? 0 : iT; iT = iT > maxT ? maxT : iT; //把拖动对象的上和左边距设置为0, obj.style.marginTop=obj.style.marginLeft=0; //设置拖动过程中的对象的left和top值 obj.style.left=iL+"px"; obj.style.top=iT+"px"; return false; } //鼠标松开 document.onmouseup=function(){ drag=false; obj.style.cursor="default"; obj.style.opacity=1; } }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,.net打造靓站,还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,以质量为核心,以实用为目的,打造一流网页特效站!zzjs.net,站长js特效。<hr> <!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站--> <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="wrap"> <h4>按照以下拖拽原理写的拖拽js效果,但是没有做任何的兼容调整(主要是不会)</h4> <blockquote> <pre> 拖拽状态 = 0 鼠标在元素上按下的时候{ 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 得出鼠标相对容器的x和y坐标 } 鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1,那么 元素y = 现在鼠标y - 鼠标相对容器y 元素x = 现在鼠标x - 鼠标相对容器x } 鼠标在任何时候放开的时候{ 拖拽状态 = 0 } </pre> </blockquote> </div> <div id="test">站长特效网,以质量为核心,以实用为目的,打造中国一流网页特效资源站!</div> </body> </html>
提示:你可以先修改部分代码再运行。
标签:
金泉涞饮水机,商务饮水机,节能饮水机,学校饮水机,ic卡饮水机, 饮水机厂家,加盟饮水机行业,首选金泉涞!
姓名
邮件
验证 (6+2)
网址 (可选)