弹出框第二章拖动

最新推荐文章于 2018-04-27 19:31:59 发布

OnEstepEnD

最新推荐文章于 2018-04-27 19:31:59 发布

阅读量849

点赞数 1

分类专栏： JS 文章标签： jsp Jsp JSP

JS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html>

<head>

<title>可拖动的层</title>

<script language="javascript" >

//验证是否按下鼠标左键的变量

var down=false;

//分别为鼠标x轴y轴，div层坐标x轴y轴

var mX,mY,dX,dY;

//当鼠标左键点指定div时触发

function mouseDown()

{

       down=true;//鼠标左键在点住期间，down值为true

       mX=event.clientX;//获得鼠标坐标，并记录当前坐标给变量

       mY=event.clientY;//获得鼠标坐标，并记录当前坐标给变量，以便后面计算

       dX=parseInt(div1.style.left);//获得div1（这是层的Id值）的坐标，因为本来是px的字符串，所以要取其中的整数值

       dY=parseInt(div1.style.top);//parseInt()就是用来截取整数值的方法

}

//鼠标左键松开时触发up事件

function up()

{

       //如果down为true时，因为鼠标左键不按状态下都属于up事件，所以要加上验证

       if(down)

       {

              down=false;//设置down为false，表示左键没有点住

              upDown();//调用下浮效果的方法，使移动停止后会有下沉的效果。如不需要可删除

       }

}

//鼠标在指定区域移动时会触发此事件

function move()

{

       //必先判断鼠标左键已被在指定区域按下

       if(down){

              //设置该层坐标等于原坐标加上鼠标移动的坐标

              div1.style.left=dX+event.clientX-mX;

              div1.style.top=dY+event.clientY-mY;

       }

}

//此变量t控制漂浮效果的次数

var t=0;

//此方法用于停止移动时的下沉漂浮效果

function upDown()

{

       if(t==0)

       {

              //t等于0时，每10毫秒调用一次本方法，并使t++避免下次再次执行

              val=setInterval("upDown()",10);

              t++;

       }

       //获取现在的纵坐标，因为做下沉动作，所以只需在纵坐标上动些手脚

       dY=parseInt(div1.style.top);

       //设置纵坐标，+3px就是离顶部距离增加了3像素，循环增加便成了下沉的效果

       div1.style.top=dY+3;

       //增加一次t+1

       t++;

       //当循环15次之后

       if(t==15)

       {

       t=0;//t归零

       clearInterval(val);//停止之前的每10毫秒调用一次

       }

}

</script>

</head>

<body onLoad="upDown()" onMouseMove="move()" onMouseUp="up()">

       <div id="div1" style="background-color:#BBBBBB; width:200px; height:200px; position:absolute; top:100px; left:200px; border:#6666FF; border:double;">

              <div id="title" onMouseDown="mouseDown()" onMouseUp="up()" style="width:200px; height:20px; background-color:#330033; top:70px; left:136px; z-index:200; position: static; font-size:<?xml:namespace prefix = st1 />9pt; color:#FFFFFF; padding-top:5px; padding-left:5px;">

浮动窗口实例。

              </div>

              <font size="2" color="#6666FF"> <br>这个可以移动的层看起来怎么样？与之前的模式窗口结合起来就可以做一个可以移动的模式窗口了！</font>

       </div>

</body>

</html>

可拖动：

<!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; charset=UTF-8">
<title>无标题文档</title>
<script language="javascript">
function alertWin(str){
 var msgw, msgh, bordercolor;
 msgw = 300;//提示窗口的宽度
 msgh = 100;//提示窗口的高度
 titleheight = 25 //提示窗口标题高度
 bordercolor = "#A480B2";//提示窗口的边框颜色
 titlecolor = "#A480B2";//提示窗口的标题颜色

 //根据自己需求注意宽度和高度的调整
 var iWidth = document.documentElement.clientWidth;
 var iHeight = document.documentElement.clientHeight;
 //遮罩层
 var bgObj = document.createElement("div");
 bgObj.setAttribute("id", "bgObj");//设置ID
 bgObj.style.cssText = "position:absolute;left:0px;top:0px;width:"+iWidth+"px;height:"+Math.max(document.body.clientHeight, iHeight)+"px;filter:Alpha(Opacity=30);opacity:0.3;background-color:#000000;z-index:101;";
 document.body.appendChild(bgObj);

 //弹出窗口
 var msgObj=document.createElement("div");
 msgObj.setAttribute("id", "msgDiv");//可以用bgObj.id="msgDiv"的方法，是为div指定属性值
 msgObj.setAttribute("align", "center");//为div的align赋值
 msgObj.style.background = "white";//背景颜色为白色
 msgObj.style.border = "1px solid " + bordercolor;//边框属性，颜色在上面已经赋值
 msgObj.style.position = "absolute";//绝对定位
 msgObj.style.left = (iWidth-msgw)/2  ;//从左侧开始位置
 msgObj.style.top = (iHeight-msgh)/2;//从上部开始位置
  //msgObj.style.left = 400  ;//从左侧开始位置
// msgObj.style.top = 300;//从上部开始位置
 msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
 msgObj.style.width = msgw + "px";//提示框的宽(上面定义过)
 msgObj.style.height = msgh + "px";//提示框的高(上面定义过)
 msgObj.style.textAlign = "center";//文本位置属性，居中。
 msgObj.style.lineHeight = "25px";//行间距
 msgObj.style.zIndex = "102";//层的z轴位置
 document.body.appendChild(msgObj);

 //弹出窗口标题
 var title = document.createElement("div");//创建一个标题对象
 title.setAttribute("id", "msgTitle");//为标题对象填加id
 title.style.margin = "0";//浮动
 title.style.padding = "3px";//浮动
 title.style.background = titlecolor;//背景颜色
 title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
 title.style.opacity = "0.75";//透明
 //title.style.border="1px solid " + bordercolor;//边框
 title.style.height = "25px";//高度
 title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";//字体属性
 //title.style.color = "red";//文字颜色
 title.style.cursor = "move";//鼠标样式
 title.innerHTML="<table border='0' width='100%'><tr><td align='left'>系统信息</td><td align=\"right\"><a href='#' οnclick='closeDiv()'>关闭</a></td></tr></table>";

 //设置窗口可移动

 var moveX = 0;
 var moveY = 0;
 var moveTop = 0;
 var moveLeft = 0;
 var moveable = false;
 var docMouseMoveEvent = document.onmousemove;
 var docMouseUpEvent = document.onmouseup;
 title.onmousedown = function() {
   var evt = getEvent();
   moveable = true;
   moveX = evt.clientX;
   moveY = evt.clientY;
   moveTop = parseInt(msgObj.style.top);
   moveLeft = parseInt(msgObj.style.left);
   document.onmousemove = function() {
         if (moveable){
     var evt = getEvent();
     var x = moveLeft + evt.clientX - moveX;
     var y = moveTop + evt.clientY - moveY;
     if ( x > 0 &&( x + msgw < iWidth) && y > 0 && (y + msgh < iHeight) ){
      msgObj.style.left = x + "px";
      msgObj.style.top = y + "px";
     }
    }
   };
   document.onmouseup = function (){
    if (moveable) {
     document.onmousemove = docMouseMoveEvent;
     document.onmouseup = docMouseUpEvent;
     moveable = false;
     moveX = 0;
     moveY = 0;
     moveTop = 0;
     moveLeft = 0;
    }
   };
  }
 //获得事件Event对象，用于兼容IE和FireFox
 function getEvent() {
  return window.event || arguments.callee.caller.arguments[0];
 }

 msgObj.appendChild(title);//在提示框中增加标题
 var txt = document.createElement("p");
 txt.style.margin = "1em 0";//文本浮动
 txt.setAttribute("id", "msgTxt");//为p属性增加id属性
 txt.innerHTML = str;//把传进来的值赋给p属性
 msgObj.appendChild(txt);//把p属性增加到提示框里
}

//添加关闭功能
function closeDiv() {
    var msgTitelObject = document.getElementById("msgDiv");
    document.body.removeChild(msgTitelObject);
    var bgObj = document.getElementById("bgObj");
    document.body.removeChild(bgObj);
}

</script>
</head>
<body>
<input type="button" value="点这里" οnclick="alertWin('消息主题');" />
</body>
</html>

OnEstepEnD

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出框第二章拖动

可拖动的层//验证是否按下鼠标左键的变量var down=false;//分别为鼠标x轴y轴，div层坐标x轴y轴var mX,mY,dX,dY;//当鼠标左键点指定div时触发function mouseDown(){ down=true;//鼠标左键在点住期间，down值为true mX=e
复制链接

扫一扫