一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的.
以下是HTML网页特效代码,点击运行按钮可查看效果:
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>zhou'shtml</title>
</head>
<body>
一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的
<divid="test"style='border:6pxsolid#000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>MagnoliaMag.nolia</span><inputtype="text"style="width:50px"maxlength="5"/></div>
<divid="test1"style='border:6pxsolid#000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>MozillaRed</span><br/><inputtype="text"style="width:80px"maxlength="9"/></div>
<divid="test2"style='border:6pxsolid#000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shinysilver</span><br/><inputtype="button"value="hitme"/></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<scripttype="text/javascript"charset="utf-8">
var$=function(id){returndocument.getElementById(id)};
Array.prototype.extend=function(C){for(varB=0,A=C.length;B<A;B++){this.push(C[B]);}returnthis;}
functiondivDrag(){
varA,B;
varzIndex=1;
this.dragStart=function(e){
e=e||window.event;
if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
varpos=this.$pos;
if(document.defaultView){
_top=document.defaultView.getComputedStyle(this,null).getPropertyValue("top");
_left=document.defaultView.getComputedStyle(this,null).getPropertyValue("left");}
else{
if(this.currentStyle){_top=this.currentStyle["top"];_left=this.currentStyle["left"];}
}
pos.ox=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(_left);
pos.oy=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(_top);
if(!!A){
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
document.detachEvent("ondragstart",G);
}
}
A=this.dragMove.create(this);
B=this.dragEnd.create(this);
if(document.addEventListener){
document.addEventListener("mousemove",A,false);
document.addEventListener("mouseup",B,false);
}else{
document.attachEvent("onmousemove",A);
document.attachEvent("onmouseup",B);
G=function(){returnfalse};
document.attachEvent("ondragstart",G);
}
this.style.zIndex=(++zIndex);
this.stop(e);
}
this.dragMove=function(e){
e=e||window.event;
varpos=this.$pos;
this.style.top=(e.pageY||(e.clientY+document.documentElement.scrollTop))-parseInt(pos.oy)+'px';
this.style.left=(e.pageX||(e.clientX+document.documentElement.scrollLeft))-parseInt(pos.ox)+'px';
this.stop(e);}
this.dragEnd=function(e){
varpos=this.$pos;
e=e||window.event;
if((e.which&&(e.which!=1))||(e.button&&(e.button!=1)))return;
if(document.removeEventListener){
document.removeEventListener("mousemove",A,false);
document.removeEventListener("mouseup",B,false);
}else{
document.detachEvent("onmousemove",A);
document.detachEvent("onmouseup",B);
document.detachEvent("ondragstart",G);
}
A=null;
B=null;
this.style.zIndex=(++zIndex);
this.stop(e);
}
this.position=function(e){
vart=e.offsetTop;
varl=e.offsetLeft;
while(e=e.offsetParent){
t+=e.offsetTop;
l+=e.offsetLeft;
}
return{x:l,y:t,ox:0,oy:0}
}
this.stop=function(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;}
if(e.preventDefault){
e.preventDefault();}
else{e.returnValue=false;}
}
this.stop1=function(e){
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;}
}
this.create=function(bind){
varB=this;
varA=bind;
returnfunction(e){
returnB.apply(A,[e]);
}
}
this.dragStart.create=this.create;
this.dragMove.create=this.create;
this.dragEnd.create=this.create;
this.initialize=function(){
for(varA=0,B=arguments.length;A<B;A++){
C=arguments[A];
C=(typeof(C)=='object')?C:(typeof(C)=='string'?$(C):null);
if(!C)continue;
C.$pos=this.position(C);
C.dragMove=this.dragMove;
C.dragEnd=this.dragEnd;
C.position=this.position;
C.stop=this.stop;
var$A=[];
$A=$A.extend(C.getElementsByTagName('span')||[]).extend(C.getElementsByTagName('input')||[]);
for(varD=0,E=$A.length;D<E;D++){
if(C.addEventListener){
$A[D].addEventListener("mousedown",this.stop1,false);
$A[D].addEventListener("mousemove",this.stop1,false);
}else{
$A[D].attachEvent("onmousedown",this.stop1);
$A[D].attachEvent("onmousemove",this.stop1);
}
}
if(C.addEventListener){
C.addEventListener("mousedown",this.dragStart.create(C),false);
}else{
C.attachEvent("onmousedown",this.dragStart.create(C));
}
}
}
this.initialize.apply(this,arguments);
}
//生成拖动层很简单
newdivDrag('test',$('test1'),$('test2'));
</script>
</body>
</html>
分享到:
相关推荐
js 万年历 浮动窗口 点击显示 鼠标可拖动 可关闭
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
js 无刷新 实现 数字转大写 浮动窗口鼠标可拖动
jquery div页面图片浮动层鼠标拖动效果代码.zip
浮动层跟随鼠标移动;前台调用后台方法,获取所需内容后返到前台的浮动层中,在所需的列中加鼠标悬浮/移出事件,使浮动层内容跟着鼠标移动,并随时更新层中内容。
JS+CSS结合的多个随鼠标滚动的浮动层代码,浮动层上端和下端固定,中间位置随之拖动
4种用法的弹出框浮动层,可拖动,Ajax弹出层效果,一共有4种不同形式的弹出框效果,不过风格基本一样,示例截图只是其中一种风格,怎么样?还行吧?
跟随页面移动鼠标可拖拽的浮动层,浮动层 、跟随页面、 可拖拽。
使用jQuery实现可拖动的浮动层的完整代码,复制保存到html文件就可以体验效果.光标移动到层上,按住鼠标就可以拖动层
jquery 插件配合实现的一款特效,鼠标按住头部,可任意拖动本浮动层,且可设置成透明效果,透明度也可调节。本代码中的部分代码是基于CSS3的原理实现的,因此可兼容于移动端浏览器,在电脑端,IE下的效果表现最差,...
这是一个用javascript写的浮动可拖动的窗口,该窗口一方面可以自由飘动,还可以用鼠标托动。
代码简介:jQuery可拖动右下角浮动窗口特效是一款可随鼠标随意移动的弹出框,内容可收缩,移到任意位置,点击可收缩到浏览器窗口的右下角。
悬浮在窗口上可任意拖动的按钮,类似于ios的home键,参考刘利涛所写的AssistiveTouch,悬浮在窗口上可拖动的按钮EaseTouch
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
鼠标拖动,非常好的。一般用在浮动时要拖动的情况下。
本文实例讲述了jQuery实现的鼠标拖动浮层功能。分享给大家供大家参考,具体如下: 拖动浮层(div等任何标签) 之前项目做到一个弹出层需要一个拖动功能,上网上查了资料,发现很多方法,但是感觉都很繁琐,有的甚至...
jquery图片鼠标拖动效果代码是一款jquery div页面图片浮动层鼠标拖动效果代码。
这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧。 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:...
内容索引:VC/C++源码,界面编程,浮动窗口,自动吸附 用VC实现可拖动的浮动窗口,就像VC6.0的IDE环境一样,下边的编译显示窗口可以拖动,它可以浮动在任何位置,并可自动吸咐于主窗体,也就是会自动寻找自己适合的位置...