js实现div在页面拖动效果


Posted in Javascript onMay 04, 2016

本文实例讲述了js实现div在页面拖动效果。分享给大家供大家参考,具体如下:

<style type="text/css">
body {
 margin: 0px;
}
#div1 {
 display: none;
 position: absolute;
 z-index: 1000;
 height: 100%;
 width: 100%;
 background: #000000;
 filter:Alpha(opacity=30);
}
#div2 {
 display: none;
 position: absolute;
 height: 100%;
 width: 100%;
 padding-top: 10%;
 z-index: 1001;
}
#div3 {
 display: block;
 position: absolute;
 z-index: 999;
}
</style>
<script type="text/javascript">
//定义移动对象和移动坐标
var Mouse_Obj="none",_x,_y;
//拖动对象函数(自动)
document.onmousemove=function()
{
 if(Mouse_Obj!=="none")
 {
 document.getElementById(Mouse_Obj).style.left=_x+event.x;
 document.getElementById(Mouse_Obj).style.top=_y+event.y;
 event.returnValue=false;
 }
}
//停止拖动函数(自动)
document.onmouseup=function()
{
 Mouse_Obj="none";
}
//确定被拖动对象函数 o为被拖动对象
function m(o)
{
 Mouse_Obj=o;
 _x=parseInt(document.getElementById(Mouse_Obj).style.left)-event.x;
 _y=parseInt(document.getElementById(Mouse_Obj).style.top)-event.y;
}
</script>
<div id="div1"></div>
<div id="div2" onmousedown="m(this.id)" style="left: 0px;top: 0px;">
<table width="50%" border="0" cellpadding="3" cellspacing="1" 
style="background: #ff7300;
position:static;filter:progid:DXImageTransform.Microsoft.DropShadow
(color=#666666,offX=4,offY=4,positives=true)" align="left">
 <tr style="cursor: move;">
  <td><font color="#FFFFFF">温馨提示:</font></td>
  <td align="right"><input type="button" value="x"
onClick="document.getElementById
('div1').style.display='none';document.getElementById
('div2').style.display='none';" style="cursor: hand;"></td>
 </tr>
 <tr>
  <td colspan="2" width="100%" bgcolor="#FFFFFF" height="150"
align="middle">欢迎访问 <a href="https://3water.com">https://3water.com</a></td>
 </tr>
</table>
</div>
<div id="div3"><input type="button" value="打开层"
onClick="document.getElementById
('div1').style.display='block';document.getElementById
('div2').style.display='block';"></div>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript new后的constructor属性
Aug 05 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 jQuery
微信小程序云开发获取文件夹下所有文件(推荐)
Nov 14 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
JS功能代码集锦
May 04 #Javascript
Markdown与Bootstrap相结合实现图片自适应属性
May 04 #Javascript
浅析Bootstrap组件之面板组件
May 04 #Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 #Javascript
js编写当天简单日历效果【实现代码】
May 03 #Javascript
javascript实现下雪效果【实例代码】
May 03 #Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
May 03 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
PHP编程实现脚本异步执行的方法
2017/08/09 PHP
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
2014/10/11 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
python局部赋值的规则
2013/03/07 Python
基于python时间处理方法(详解)
2017/08/14 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Opencv实现抠图背景图替换功能
2019/05/21 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
Html5定位终极解决方案
2020/02/05 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
好书伴我成长演讲稿
2014/05/14 职场文书
高中学校对照检查材料
2014/08/31 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
优秀教师先进材料
2014/12/16 职场文书
十月围城观后感
2015/06/08 职场文书
初一英语教学反思
2016/02/15 职场文书