实用窗口拖拽效果

作者:sky 点击:247 评论:0 发布时间:周三, 11/30/2011 - 14:26 所属分类:窗口特效

实用窗口拖拽代码，上面写原理，兼容性自己解决。

<!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>  <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>

提示：你可以先修改部分代码再运行。

顶一下

(2)

100%

踩一下

(0)

标签: