基于JavaScript实现窗口拖动效果

写法类似于上一篇，水平进度条拖拽，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .nav{
      width: 100%;
      height: 20px;
      background-color: #ccc;
    }
    .popup{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -150px;
      margin-top: -150px;
    }
    .popup .title{
      height: 20px;
      width: 100%;
      background: deeppink;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="nav">注册信息</div>
  <div class="popup" id="popupfather">
    <div class="title" id="popupson">我是窗口标题，可拖着我走</div>
    <div class="content">我是窗口内容</div>
  </div>
  <script>
    var popupfather = document.getElementById('popupfather');
    var popupson = document.getElementById('popupson');

    popupson.onmousedown = function(event){
      var event = event || window.event;
      var that = this;
      var x = event.clientX - popupfather.offsetLeft - 150; //当前鼠标点击处相对于popupfather所在位置x ， -150 是处理margin值
      var y = event.clientY - popupfather.offsetTop - 150; //当前鼠标点击处相对于popupfather所在位置y
      document.onmousemove = function(event){
        var event = event || window.event;
        popupfather.style.left = event.clientX - x + "px";
        popupfather.style.top = event.clientY- y + "px";
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

      }
    }
    document.onmouseup = function(){
      document.onmousemove = null;
    }
  </script>
</body>
</html>

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Jquery仿IGoogle实现可拖动窗口示例代码

    google可谓是ajax的特效用的淋漓尽致,google suggest, google map,igoogle 可拖动窗口等等...今天要做一个网站的类似效果,仿照iGoogle做了一个简单的小demo. 这个的demo是根据一个Jquery的框架直接做出来的:easywidgets.这个框架是可以免费下载的http://plugins.jquery.com/project/easywidgets. 废话就不多说了,直接把源代码贴出来,让大家学习! html <html> <head

  • JavaScript模拟可展开、拖动与关闭的聊天窗口实例

    用JavaScript实现的仿QQ聊天窗口,可以展开层.拖动层.关闭层,还可以简单发消息,很不错吧,而且代码也不多,适合新手研究,也比较实用,你可以在此基础上扩展很多JS+CSS应用. <!--CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt--> <html> <he

  • javascript div 弹出可拖动窗口

    /* * 创建弹出div窗口. 1.接口说明:DivWindow(id,title,width,height,content) 构造函数,创建一个弹出窗口对象 参数:id 弹出窗口id: title:弹出窗口标题名称: width:弹出窗口宽度 height:弹出窗口高度 content: 弹出窗口显示内容 2.接口说明: closeDivWindow(id) 关闭窗口 参数: id 弹出窗口id 3.接口说明:setPopupTopTitleFontColor(PopupTopTitleFon

  • js仿百度登录页实现拖动窗口效果

    在web开发中,鼠标拖拽效果非常常见,例如百度的登录页,点击登录会弹出一个窗口,并且这个窗口可以拖动:那么这样的拖拽效果如何实现呢 ?其实实现很简章,搞清楚他的原理就很容易了:首当其冲的,要涉及到鼠标的三个事件,分别为鼠标按下.移动.松开:在这三个事件里分别计算元素鼠标的位置即可: 复制代码 /******* 拖拽原理1: 拖拽状态 = 0 鼠标在元素上按下的时候 { 拖拽状态 = 1 记录下鼠标的x和y坐标 记录下元素的x和y坐标 } 鼠标在元素上移动的时候 { 如果拖拽状态是0就什么也不做.

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了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

  • javascript实现可拖动变色并关闭层窗口实例

    本文实例讲述了javascript实现可拖动变色并关闭层窗口的方法.分享给大家供大家参考.具体分析如下: 这是一款基于javascript+CSS实现层拖动的代码,不同的是它在拖动的时候窗口会变色,使操作体验更好一些,你可以运行代码查看效果.它还可以显示/隐藏或关闭打开的效果,没事的时候推敲一下 <html> <head> <title>拖动窗口</title> <meta http-equiv="Content-Type" con

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

  • javascript弹出拖动窗口

    可以拖动的弹出窗口,在很多网页上都可以见到,非常的人性化,下面通过一段javascript代码就可以实现弹出拖动窗口,废话不多说了,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>

  • javascript实现漂亮的拖动层，窗口拖拽特效

    javascript实现漂亮的拖动层,窗口拖拽特效 <!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

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

随机推荐