关键是还可以拖动 查看演示
代码1(最简单的拖动原理):
<div id='box' style="position:absolute;width:100px;height:100px;background-color:'#ee735c'">
<div>可拖动div元素</div>
</div>
<script>
var oDiv=document.getElementById('box')
oDiv.onmousedown=function(ev){/*鼠标按下*/
var disX=ev.clientX-oDiv.offsetLeft
var disY=ev.clientY-oDiv.offsetTop
document.onmousemove=function(ev){
var l=ev.clientX-disX
var t=ev.clientY-disY
oDiv.style.left=l+'px'
oDiv.style.top=t+'px'
}
document.onmouseup=function(){/*鼠标松开*/
document.onmousemove=null;
document.onmouseup=null
}
}
</script>代码2(实现模拟window窗口,可拖动 可直接设置 窗口标题,宽高,位置 以及子元素的位置):
<meta charset="UTF-8">
<div id='box' style="width:300px;height:200px;" title="窗口标题">
<span style="left:30px;top:30px;">帐号:</span><input style="left:74px;top:30px;" type="text" name="">
<span style="left:30px;top:60px;">密码:</span><input style="left:74px;top:60px;" type="text" name="">
<input style="left:175px;top:130px;"type="submit" value="登录">
</div>
<script>
var oDiv=document.getElementById('box')
/*根据网页宽度 和窗口大小 来调整左边和顶边,使其居中显示*/
var w = parseInt(document.documentElement.scrollWidth || document.body.scrollWidth);
var h = parseInt(document.documentElement.scrollHeight || document.body.scrollHeight);
oDiv.style.left=(w -parseInt(oDiv.style.width))/2+"px";
oDiv.style.top=(h -parseInt(oDiv.style.height))/2+"px";
/*div样式设置*/
oDiv.style.backgroundColor="#F0F0F0";
oDiv.style.position="absolute";
oDiv.style.borderColor="#AEC7E1";
oDiv.style.borderWidth="4px";
oDiv.style.borderTopWidth="30px";
oDiv.style.borderStyle="solid";
/*创建关闭按钮*/
span1 = document.createElement('span');
span1.innerHTML='X';
span1style="background-color:red;position:absolute;top:-27px;right:3px;color:#FFFFFF;";
span1style+="width:26px;border-radius:3px;text-align:center;line-height:26px;cursor:pointer;";
span1.style=span1style;
span1.onclick=function(){oDiv.style.display="none";}
oDiv.appendChild(span1);
/*获取div的title添加到窗口上面*/
title=document.createElement('span');
title.innerHTML=oDiv.title;
oDiv.title="";
title.style="color:Black;position:absolute;left:4px;top:-30px;line-height:30px;cursor:default;";
oDiv.appendChild(title);
/*子元素位置设置开始***********************************************************/
var childs = oDiv.children;
for(var i = childs.length - 1; i >= 0; i--){
childs[i].style.position="absolute";
console.log(childs[i]);
}
/*子元素位置设置结束***********************************************************/
/*拖动事件处理*/
oDiv.onmousedown=function(ev){/*鼠标按下*/
var disX=ev.clientX-oDiv.offsetLeft
var disY=ev.clientY-oDiv.offsetTop;console.log(disY);
if(disY>30){/*使其只拖动标题栏有效*/
retuen;
}
document.onmousemove=function(ev){
var l=ev.clientX-disX
var t=ev.clientY-disY
oDiv.style.left=l+'px'
oDiv.style.top=t+'px'
}
document.onmouseup=function(){/*鼠标松开*/
document.onmousemove=null;
document.onmouseup=null
}
}
</script>相关推荐
c++mFC基于对话框的 如何新建一个窗口第一步:调出资源视图,添加一个dialog添加后,这个 ID是可以随意修改的(在属性里)第二步:在可视化编辑界面上面 点击右键.为这个对话框 添加类,名字一般以大写C开头类创建完毕后,会自动生成 类名
原生js代码实现 返回顶部代码可以写成chrome插件 在所有网站插入js代码:/*返回顶部 和返回底部*/ window.onload=function(){ /*添加返回顶部按钮*/ var a=document.c
javascript原生js实现html中checkbox复选框按shift多选纯原生JavaScript代码 无需任何库整理后 可以直接拿来用的代码<input type='checkbox' name='cateid[]'> &l
模态对话框与非模态对话框的区别模态对话框: 必须关闭 才能操作后面的窗口非模态对话框: 多个窗口可以随意操作
WindowsAPi创建控件 或创建子窗口方法创建按钮一般是在 WM_CREATE消息的响应中创建子窗口 创建控件 创建按钮,创建单选框,复选框 等等按钮的创建:创建按钮第一个参数(类名)必须是 button 不区分大小写case WM_CREA
highlight.js 代码高亮插件详细使用说明第一步:下载首选下载 highlight.js 代码高亮插件下载地址:https://highlightjs.org/ 勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。
原生javascript生成随机字母 js取随机字符JavaScript取随机字母:方式有很多 我比较喜欢这一种 其中字符列表 和 要取的个数 改起来都比较方便<script> function 取随机字母(count){
原生js取随机数,指定范围内的随机数例如取5000到8000之间的随机数:a=Math.round(Math.random()*(8000-5000)+5000);<script> //获取 0～1.0 之间的随机数：结
原生js,原生javascript写的开关按钮<style> td,table{border:1px solid #323841;} </style> <form method="get"
css让html文本闪烁的代码<style> @keyframes blink { 0% {opacity: 0;} 50% {opacity: 1;} 100% {opacity: 0;} } .blinkin