onmousedown活用之鼠标拖动
这个布局蛮简单的就是一个div块,通过定位,固定位置
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div {
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
</style>
</head> <body>
<div id="div"> </div>
<div id="div2"></div>
</body> </html>
在js代码中需要用到onmousedown和onmouseup这一对方法来实现
而o=event||ev;event表示一般浏览器,而ev则表示ie浏览器,所以o就可以在不同的浏览器中同样实现相同效果
<script type="text/javascript">
var Div = document.getElementById("div");
Div.onmousedown = function(ev) {
var o = event || ev;
//获取到鼠标点击的位置距离div左侧和顶部边框的距离
oX = o.clientX - parseInt(getStyle(Div, "left"));
oY = o.clientY - parseInt(getStyle(Div, "top"));
//当鼠标移动，把鼠标的偏移量给div
document.onmousemove = function(ev) {
var o = event || ev;
//计算出鼠标在XY方向上移动的偏移量，把这个偏移量加给DIV的左边距和上边距，div就会跟着移动
Div.style.left = o.clientX - oX + "px";
Div.style.top = o.clientY - oY + "px";
} //当鼠标按键抬起，清除移动事件
document.onmouseup = function() {
document.onmousedown = null;
document.onmousemove = null;
}
} //获取属性的数值
function getStyle(obj, attr) {
if (obj.currentStyle) {
//currentStyle获取样式的值，对应的是ie浏览器
return obj.currentStyle[attr];
} else {
//同理，对应的是其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
</script>
onmousedown活用之鼠标拖动的更多相关文章
- 实现鼠标拖动canvas绘制的图片
不啰嗦上代码: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...
- 基于js鼠标拖动图片排序
分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线 ...
- Javascript 简单实现鼠标拖动DIV
http://zhangbo-peipei-163-com.iteye.com/blog/1740078 比较精简的Javascript拖动效果函数代码 http://www.jb51.net/art ...
- 用canvas实现鼠标拖动绘制矩形框
需要用到jCanvas插件和jQuery. jCanvas下载:https://raw.githubusercontent.com/caleb531/jcanvas/master/jcanvas.mi ...
- 图片3d轮放查看效果(V2.0)：使用鼠标拖动实现图片的轮放
上面的版本号为通过左右button实现图片轮放,这个版本号.是通过在窗体拖动鼠标.左右滑动图片. 关键点在于选择一个合适的值.使鼠标拖动时.全部图片均可显示,可是不会滑动过快或离开窗体. 不多说,直接 ...
- CSharpGL(39)GLSL光照示例：鼠标拖动太阳（光源）观察平行光的漫反射和镜面反射效果
CSharpGL(39)GLSL光照示例:鼠标拖动太阳(光源)观察平行光的漫反射和镜面反射效果 开始 一图抵千言.首先来看鼠标拖动太阳(光源)的情形. 然后是鼠标拖拽旋转模型的情形. 然后我们移动摄像 ...
- jQuery实现鼠标拖动改变Div高度
最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...
- JavaScript 实现鼠标拖动元素
一.前言 最开始实现鼠标拖动元素的目的就是在一个页面上拖动很多小圆点,用于固定定位,然后在复制HTML,粘贴在页面的开发代码中,就是这么一个功能,实现了很多遍,都没有做好,不得已采用了jQuery.f ...
- Selenium2学习-027-WebUI自动化实战实例-025-JavaScript 在 Selenium 自动化中的应用实例之三（页面滚屏，模拟鼠标拖动滚动条）
日常的 Web UI 自动化测试过程中,get 或 navigate 到指定的页面后,若想截图的元素或者指定区域范围不在浏览器的显示区域内,则通过截屏则无法获取相应的信息,反而浪费了无畏的图片服务器资 ...
随机推荐
- 基于 Consul 的 Docker Swarm 服务发现
Docker 是一种新型的虚拟化技术,它的目标在于实现轻量级操作系统的虚拟化.相比传统的虚拟化方案,Docker 虚拟化技术有一些很明显的优势:启动容器的速度明显快于传统虚拟化技术,同时创建一台虚拟机 ...
- WinForm笔记一：文本框只允许输入数字
在WinForm的文本框中,有时候只允许数字,而不能输入除数字以外的其他字符,要调用TextBox的KeyPress事件,代码如下: //只允许输入数字 if (e.KeyChar<'0'||e ...
- HDU 4520 小Q系列故事——最佳裁判
Time Limit : 500/200ms (Java/Other) Memory Limit : 65535/32768K (Java/Other) Problem Description 过 ...
- 《Intel汇编第5版》 汇编拷贝字符串
一.字符串定义 二.dup指令 三.调用Writestring过程 四.代码以及效果 TITLE String Copy INCLUDE Irvine32.inc includelib Irvine3 ...
- Nodejs 学习
1,Node.js REPL交互式解释器:nodejs安装完毕后,打开终端,进入到nodejs的安装目录下,输入node,进入到新的页面,该页面称为Node.js REPL (交互式解释器):可以简单 ...
- Java之IO流
目录: 1.文件编码 2.File类 3.RandomAccessFile 4.字节流 5.字符流 6.对象的序列化和反序列化 1.文件编码 1)相关知识点 八进制和十六进制的表示方式:八进制前面加0 ...
- Leetcode - 458 Poor Pigs
题目: 总共有1000个罐子,其中有且只有1个是毒药,另外其他的都是水. 现在用一群可怜的猪去找到那个毒药罐. 已知毒药让猪毒发的时间是15分钟, 那么在60分钟之内,最少需要几头猪来找出那个毒药罐? ...
- 初学laravel框架，解决访问路由404的问题
运行环境:windows+phpstorm+Nginx 第一步:添加 PHP Built-in Web Server 第二步:配置路径和端口(路径是你的laravel中的pubilc,端口是你没有占用 ...
- 在cmd中设置字体
1.首先在cmd中输入chcp 65001 回车(通过 chcp命令改变代码页,UTF-8的代码页为65001) 2.右击命令提示符的标题栏点击属性. 3.在属性中选择字体后点击确认即可.
- Strusts2--课程笔记7
国际化: 国际化是指,使程序在不做任何修改的情况下,就可以使用在不同的语言环境中.国际化在一般性项目中是不常用的.在编程中简称 i18n. 国际化是通过读取资源文件的形式实现的.资源文件的定义与注册, ...