写法类似于上一篇,水平进度条拖拽,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Document
& lt; style>
* {
保证金:0;
填充:0;
}
.nav {
宽度:100%;
高度:20 px;
background - color: # ccc;
}
.popup {
宽度:300 px;
身高:300 px;
边界:1 px固体红;
位置:绝对的;
左:50%;
上图:50%;
margin-left: -150 px;
margin-top: -150 px;
}
.popup .title {
高度:20 px;
宽度:100%;
背景:一个;
光标:移动;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类="导航"祝辞注册信息& lt;/div>
& lt; div类="弹出" id=皃opupfather”比;
& lt; div类="标题" id=皃opupson”在我是窗口标题,可拖着我走& lt;/div>
& lt; div类=澳谌荨痹谖沂谴翱谀谌? lt;/div>
& lt;/div>
& lt; script>
var popupfather=. getelementbyid (“popupfather”);
var popupson=. getelementbyid (“popupson”);
popupson。onmousedown=函数(事件){
var=事件| | window.event;
var=这个;
var x=事件。clientX——popupfather。offsetLeft - 150;//当前鼠标点击处相对于popupfather所在位置x, -150是处理利润值
var y=事件。clientY——popupfather。offsetTop - 150;//当前鼠标点击处相对于popupfather所在位置y
文档。onmousemove=函数(事件){
var=事件| | window.event;
popupfather.style。左=事件。clientX - x +“px”;
popupfather.style。=事件。clientY - y +“px”;
窗口。getSelection & # 63;.removeAllRanges window.getSelection () (): document.selection.empty ();
}
}
文档。onmouseup=function () {
文档。onmousemove=零;
}
& lt;/script>
& lt;/body>
& lt;/html>
之前
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
