基于JavaScript实现窗口拖动效果


Posted in Javascript onJanuary 18, 2017

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

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

效果图:

基于JavaScript实现窗口拖动效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript EXCEL 操作类代码
Jul 30 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jQuery中:last选择器用法实例
Dec 30 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
js转换对象为xml
Feb 17 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
这样回答继承可能面试官更满意
Dec 10 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
原生js实现节日时间倒计时功能
Jan 18 #Javascript
原生js实现返回顶部缓冲效果
Jan 18 #Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 #Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 #Javascript
js实现简单的网页换肤效果
Jan 18 #Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 #Javascript
AngularJs 利用百度地图API 定位当前位置 获取地址信息
Jan 18 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
深入php函数file_get_contents超时处理的方法详解
2013/06/03 PHP
php的ajax简单实例
2014/02/27 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
Zend Framework教程之请求对象的封装Zend_Controller_Request实例详解
2016/03/07 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
鼠标移到图片上变大显示而不是放大镜效果
2014/06/15 Javascript
JS动态添加Table的TR,TD实现方法
2015/01/28 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
js实现点赞效果
2020/03/16 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
原生js实现滑块区间组件
2021/01/20 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
在Python中获取两数相除的商和余数方法
2018/11/10 Python
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
三分钟演讲稿范文
2014/04/24 职场文书
党员个人党性分析材料
2014/12/18 职场文书
2015年网络管理员工作总结
2015/05/21 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
python实现商品进销存管理系统
2022/05/30 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript