鼠标可拖动的浮动层效果
一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的.
以下是HTML网页特效代码，点击运行按钮可查看效果：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>zhou's html</title>
</head>
<body>
一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的//一共三个层,下面还有一个,把他拖上来,按下文字和button是不可以拖动的
<div id="test" style='border:6px solid #000000;left:1px;top:2px;width:100px;height:100px;background-color:#F9F7ED;position:absolute;text-align:center'><span>Magnolia Mag.nolia</span><input type="text" style="width:50px" maxlength="5"/></div>
<div id="test1" style='border:6px solid #000000;left:1px;top:200px;width:150px;height:150px;background-color:#FF1A00;position:absolute;text-align:center'><span>Mozilla Red</span><br/><input type="text" style="width:80px" maxlength="9"/></div>
<div id="test2" style='border:6px solid #000000;left:200px;top:800px;width:100px;height:100px;background-color:#EEEEEE;position:absolute;text-align:center'><span>Shiny silver</span><br/><input type="button" value="hit me"/></div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript" charset="utf-8">
var $=function(id){return document.getElementById(id)};
Array.prototype.extend=function(C){for(var B=0,A=C.length;B<A;B++){this.push(C[B]);}return this;}
function divDrag(){
var A,B;
var zIndex=1;
this.dragStart=function(e){
e=e||window.event;
if((e.which && (e.which!=1))||(e.button && (e.button!=1)))return;
var pos=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(){return false};
document.attachEvent("ondragstart",G);
}
this.style.zIndex=(++zIndex);
this.stop(e);
}
this.dragMove=function(e){
e=e||window.event;
var pos=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){
var pos=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){
var t=e.offsetTop;
var l=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){
var B=this;
var A=bind;
return function(e){
return B.apply(A,[e]);
}
}
this.dragStart.create=this.create;
this.dragMove.create=this.create;
this.dragEnd.create=this.create;
this.initialize=function(){
for(var A=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(var D=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);
}
//生成拖动层很简单
new divDrag('test',$('test1'),$('test2'));
</script>
</body>
</html>
鼠标可拖动的浮动层效果相关推荐
- html中鼠标的浮动,JS实现的鼠标移入智能提示浮动层Tips
JS实现的鼠标移入智能提示层Tips * { padding: 0; margin: 0; } li { } body { background: #fdf7f7; } #explain { heig ...
- html鼠标悬停弹出,纯css实现鼠标滑过弹出层效果
复制代码代码如下: 无标题文档 *{margin:0; padding:0;} /* 所有元素外边距为0 内边距为0 */ /* body中元素字体大小为12px,字体样式为:"Times ...
- html右侧浮动栏随着滚动,jQuery实现div浮动层跟随页面滚动效果
jQuery实现浮动层跟随页面滚动效果 #main{height:2000px} .demo{width:180px; height:250px; margin:10px; border:2px so ...
- 浮动层图片鼠标指针移到自动放大
html code: 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 两种方式实现css取消页面鼠标双击选中文字或单击拖动选中文字的效果
问题描述 我们知道浏览器页面上的文字正常情况下我们是可以双击选中.或者单击鼠标横向拖动也能选中的,选中以后可以右击出现面板然后去复制什么的.但是有的时候,这种效果我们并不想要的,比如用户点快了的时候, ...
- css简单实现鼠标悬浮时图片向上浮动的效果
文章目录 前言 一.效果图 二.使用步骤 1.HTML代码 2.CSS代码 总结 前言 css简单实现鼠标悬浮时图片向上浮动的效果 一.效果图 二.使用步骤 1.HTML代码 代码如下(示例): &l ...
- html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
- android仿百度地图悬浮式窗口,百度地图(bMap)实现浮动层、按钮等的方法及代码...
本帖最后由 流浪男 于 2015-10-20 16:34 编辑 利用openFame的方法我们可以在百度地图模块(bMap)上添加任何想要的浮动层,比如 一.添加按钮 二.在中间添加固定图标,拖动地图 ...
- css3新增选择器、伪元素、隐藏元素的方法、visibility: hidden与display：none；的区别 、遮罩层效果、 三级菜单制作、选项卡制作——css3知识点总结
目录 css3新增选择器 兄弟选择器 属性选择器 伪类选择器 其他伪类选择器 类元素选择器 直接选择器 否定选择器 伪元素 :after清除浮动 :before和:after 用来写小三角形 首字母 ...
最新文章
- 网站优化之关键词的挖掘准则有哪些？
- UITableViewCell 设置
- java 线程分组_Java多线程可以分组，还能这样玩！
- 东华理工大学arm试卷_ARM东华理工大学2015-2016试卷A
- 中国互联网史是一部流氓史
- iOS多线程系列之GCD栅栏(barrier)实现同步锁
- 安川焊接机器人做圆弧运动编程_安川MOTOMAN工业机器人编程与操作（3）
- 视频行为识别检测综述
- 【软件工程】层次图、HIPO图——期末快速复习用
- android 圆形自定义进度条,Android实现自定义圆形进度条
- 数据结构习题——第一章 绪论
- 图像直方图及其均衡化--opencv
- 永远闪亮，网的眼睛 (转)
- 单字节和双字节的转换
- 波菲那契数列公式_裴波那契数列
- 离散数学期末考试必考知识点
- 袁斌：极空间家庭私有云，您的数字资产大管家
- jodaTime 的使用说明
- 基于多元回归模型的房产估价
- 使用 AirPlay 发送图片