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 相关文章推荐
jquery+json 通用三级联动下拉列表
Apr 19 Javascript
javascript常用的正则表达式实例
May 15 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 Javascript
Vue表单实例代码
Sep 05 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
详解微信小程序 通过控制CSS实现view隐藏与显示
May 24 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
解决vue cli使用typescript后打包巨慢的问题
Sep 30 Javascript
vue组件系列之TagsInput详解
May 14 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
PHP文件注释标记及规范小结
2012/04/01 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
简介JavaScript错误处理机制
2020/08/04 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
总结python中pass的作用
2019/02/27 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
恶搞卫生巾广告词
2014/03/18 职场文书
教师一岗双责责任书
2014/04/16 职场文书
创先争优标语
2014/06/27 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
杭州黄龙洞导游词
2015/02/10 职场文书
MySQL Threads_running飙升与慢查询的相关问题解决
2021/05/08 MySQL
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
nginx配置限速限流基于内置模块
2022/05/02 Servers