基于JavaScript实现窗口拖动效果
更新时间：2017年01月18日 16:56:49 作者：秋天1014童话
这篇文章主要介绍了基于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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
最近一直在用javascript在做项目 可是做着做着 感觉很多功能代码都是重复的。2010-05-05
开发人员在javascript类中为实例中需要的任何书籍创建属性，但是如果实例中可用之前需要计算某些数据该如何处理呢，今天小编通过本文给大家分享JavaScript 中的延迟加载属性模式，一起看看吧2021-06-06
这篇文章主要介绍了jquery实现动静态条形统计图,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript日期库date-fn.js使用方法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
npm script和package-lock.json使用示例详解
这篇文章主要为大家介绍了npm script和package-lock.json使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
小测试shift、ctrl、alt按键的获取，感兴趣的朋友可以参考下哈，希望可以帮助到你2013-04-04
这篇文章给大家介绍javascript多并发问题处理方法，涉及到js多并发处理方法相关知识，对js多并发处理方法感兴趣的朋友可以参考下本文2015-10-10
这篇文章主要为大家详细介绍了JS+CSS实现网页加载中的动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
条件判断语句是程序开发过程中一种经常使用的语句形式,和大部分编程语言相同,JavaScript 中也有条件判断语句,这篇文章主要给大家介绍了关于如何让js中的if判断如丝般顺滑的相关资料,需要的朋友可以参考下2021-10-10
本篇文章是对瀑布流局部的实现进行了详细的分析介绍。需要的朋友参考下2013-05-05
最新评论