js拖动层

模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>js拖动层</title>
 6 <style>
 7 body{padding:0; margin:0; width:100%; height:100%;}
 8 * html,* html body{background-image:url(about:blank);background-attachment:fixed}
 9 #dragWp{width:100%; height:100%; position:fixed; left:0; top:0; z-index:99999999; _position:absolute;_left:expression(eval(document.documentElement.scrollLeft));_top:expression(eval(document.documentElement.scrollTop))}
10 #dragBg{ width:100%; height:100%; background-color:#000; position:absolute; left:0; top:0; opacity:0.4; filter:alpha(opacity=40);}
11 #dragMain{width:200px;height:100px;position:absolute; border:1px solid #999;line-height:30px;font-size:16px;text-align:center; background-color:#FFF;}
12 #dragTitle{ width:100%; height:40px; line-height:40px; background-color:#ccc; cursor:move;}
13 #close{float:right; margin-right:5px; z-index:999; font-size:12px; font-style:normal; cursor:pointer;}
14 </style>
15 </head>
16 <body>
17 <div style="height:1200px; text-align:center;">
18     <h1>hello world</h1>
19 </div>
20 <div id="dragWp">
21     <div id="dragBg"></div>
22     <div id="dragMain">
23         <div id="dragTitle">
24             <em id="close">关闭</em>拖动层
25         </div>
26         hello world
27     </div>
28 </div>
29 <script>
30 window.onload=function(){
31     var dragWp=document.getElementById("dragWp");
32     var dragMainId=document.getElementById("dragMain");
33     var w=dragWp.offsetWidth;
34     var h=dragWp.offsetHeight;
35     dragMainId.style.left=(w-dragMainId.offsetWidth)/2+"px";
36     dragMainId.style.top=(h-dragMainId.offsetHeight)/2+"px";
37 }
38
39 function dragTemp(dragWp,dragMainId,dragTitleId,closeId,opacity){
40     var dragWp=document.getElementById(dragWp);
41     var dragMainId=document.getElementById(dragMainId);
42     var dragTitleId=document.getElementById(dragTitleId);
43     var closeId=document.getElementById(closeId);
44     var posX,posY,x,y;
45     dragTitleId.onmousedown=function(e){
46         var e = e || window.event;
47         posX=e.clientX-dragMainId.offsetLeft; //鼠标距离拖动层左侧的距离
48         posY=e.clientY-dragMainId.offsetTop;  //鼠标距离拖动层上侧的距离
49         dragMainId.style.opacity=opacity;
50         dragMainId.style.filter="alpha(opacity="+opacity*100+")";
51         document.onmousemove=function(e){
52             var e = e || window.event;
53             x=e.clientX-posX;
54             y=e.clientY-posY;
55 //            if(x<=0) x=0;    //不允许移出左边
56 //            else if(x>=document.body.clientWidth-dragMainId.offsetWidth) x=document.body.clientWidth-dragMainId.offsetWidth; //不允许移出右边
57             dragMainId.style.left=x+"px";
58             dragMainId.style.top=y+"px";
59             dragTitleId.style.cursor="move";
60             document.onselectstart=function(){ return false } //拖动不选中文字
61         }
62     };
63     document.onmouseup=function(){
64         document.onmousemove=null;
65         dragMainId.style.opacity=1;
66         dragMainId.style.filter="alpha(opacity=100)";
67     }
68     if(closeId){
69         closeId.onclick=function(){
70             dragWp.style.display="none";
71         }
72     }
73 }
74 function drag(args){
75     dragTemp(args.dragWp,
76              args.dragMainId,
77              args.dragTitleId,
78              args.closeId || null,
79              args.opacity || 1)
80 }
81 //调用
82 drag({dragWp:"dragWp",dragMainId:"dragMain",dragTitleId:"dragTitle",closeId:"close",opacity:0.5});
83 </script>
84 </body>
85 </html>
时间: 2024-11-05 15:57:29

js拖动层的相关文章

js拖动层原形版

脚本文件: function JzDrag(moveDivId, moveDivHandle) { // var me = this; this.M = false; //是否在移动对象 this.DX = { x: 0, y: 0 }; //保存起始位置和元素的位置差 this.Div = document.getElementById(moveDivId); //移动对象 this.Handle = moveDivHandle ? document.getElementById(moveDi

漂亮的Js拖动层,窗口拖拽(改变大小/最小化/最大化/还原/关闭)

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

JS拖动DIV布局

方法一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charse

Js浮动层插件,点击按钮弹出层,可关闭

<!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> <title>石家庄礼品公司</title>

JS遮罩层——如何使被遮罩后的链接可以点击

在遮罩层的使用过程中,发现了一个问题,如果有一个有<a></a>标签链接的HTML页面,如果使用JS遮罩层将此HTML页面遮罩,则此链接无法点击:如果要使此链接可以点击,则需要在<a></a>标签中添加style属性“position:relative;”,例如: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>DIV CS

微信小程序-06-详解介绍.js 逻辑层文件-注册页面

上一篇介绍的是 app.js 逻辑层文件中注册程序,对应的每个分页面都会有的 js 文件中 page() 函数注册页面 微信小程序-06-详解介绍.js 逻辑层文件-注册页面 宝典官方文档: https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html 今天开始深度学习编程语法,虽然大部分是拷贝官方文档,代码类都是我自己敲的,希望能自己敲一遍表格里的内容,熟悉一下操作 页面 Page Page(Object) Page(

拖动层 拖动div 封装js 貌似不兼容FF,郁闷

原文发布时间为:2009-12-02 -- 来源于本人的百度文章 [由搬家工具导入] <!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"><he

jQuery制作div板块拖动层排序

html结构: <!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="

touch.js 拖动、缩放、旋转 (鼠标手势)

可以实现手势操作:拖动.缩放.旋转.封装好的脚本方法是这样的: var cat = window.cat || {}; cat.touchjs = { left: 0, top: 0, scaleVal: 1, //缩放 rotateVal: 0, //旋转 curStatus: 0, //记录当前手势的状态, 0:拖动, 1:缩放, 2:旋转 //初始化 init: function ($targetObj, callback) { touch.on($targetObj, 'touchsta