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实现分割提取页面所需内容
May 09 Javascript
JQuery 学习笔记 选择器之一
Jul 23 Javascript
javascript 当前日期加(天、周、月、年)
Aug 09 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
Javascript 作用域使用说明
Aug 13 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
不得不知的ES6小技巧
Jul 28 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
基于JS实现父组件的请求服务过程解析
Oct 14 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP程序员最常犯的11个MySQL错误小结
2010/11/20 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
js 调整select 位置的函数
2008/02/21 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
微信小程序文字显示换行问题
2019/07/28 Javascript
async/await让异步操作同步执行的方法详解
2019/11/01 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python目录与文件名操作例子
2016/08/28 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
详解Python中的文件操作
2021/01/14 Python
css3中的calc函数浅析
2018/07/10 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
《美丽的公鸡》教学反思
2014/02/25 职场文书
股东协议书范本
2014/04/14 职场文书
汽车机电维修工求职信
2014/09/30 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL