javascript 实现图片拖动
javascript实现图片拖动效果并不难，主要的思路如下
1：给图片绑定监听鼠标按下对象，设置拖动属性为true
2：鼠标抬起：拖动属性为false
鼠标移动：改变坐标即可，新坐标=图片原始坐标+鼠标移动后坐标-鼠标移动前坐标
注意事项
要给图片的位置属性设为fixed或者absolute，并且要图片复制初始的left和top属性
代码如下
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>test dragging picture</title>
<script type="text/javascript" charset="utf-8">
function draggingP (e) {
//确认事件
var e = e || window.event;
//确认源事件
var myElement = e.srcElement || e.target;
//不要默认事件
if(e.preventDefault) e.preventDefault();
else e.returnvalue = false;
var mypic = document.getElementById("mypic");
mypic['dragging']=true;//拖动属性为true
var lef =parseInt(myElement.style.left);
var to = parseInt(myElement.style.top);
// alert(lef+"+"+to);
myElement.onmouseup = function () {
mypic['dragging']=false;//拖动属性为false
}
document.onmousemove = function (eMove) {
var eMove = eMove || window.event;
if(mypic['dragging']==true){//新坐标
myElement.style.left = eMove.clientX -e.clientX + lef+"px";
myElement.style.top = eMove.clientY -e.clientY + to+"px";
return false;
}
} }
window.onload = function () {
var mypic = document.getElementById("mypic");
mypic['dragging']=false;
if(navigator.userAgent.indexOf('MSIE')>0){//IE
mypic.attachEvent("onmousedown",draggingP);
}//绑定监听事件
else{
mypic.addEventListener("mousedown",draggingP,false);
}
}
</script>
</head>
<body>
<img src="http://www.sysu.edu.cn/favicon.ico" alt="sysu" name="mypic" id="mypic" style="position:absolute">
</body>
</html>
javascript 实现图片拖动的更多相关文章
- javascript完美实现图片拖动改变顺序
在web页面中,需要改变多个元素的位置,可以通过元素拖动来实现.HTML5中加入了一个全局属性draggable,通过设置true/false来控制元素是否可拖动. 下面以图片拖动为例,用jQuery ...
- JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效
<html> <head> <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...
- Javascript之相册拖动管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端学习 第七弹： Javascript实现图片的延迟加载
前端学习 第七弹: Javascript实现图片的延迟加载 为了实现图片进入视野范围才开始加载首先: <img src="" x-src="/acsascas ...
- JavaScript校验图片格式及大小
<!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...
- JavaScript判断图片是否加载完成的三种方式
JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 ...
- 基于javascript实现图片懒加载（亲测有效）
这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...
- HTML5+javascript实现图片加载进度动画效果
在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览: 0% // ...
- Javascript 将图片的绝对路径转换为base64编码
Javascript将图片的绝对路径转换为base64编码 我们可以使用canvas.toDataURL的方法将图片的绝对路径转换为base64编码:在这我们引用的是淘宝首页一张图片如下: var i ...
随机推荐
- 【BZOJ5288】[HNOI2018]游戏（乱搞？）
[BZOJ5288][HNOI2018]游戏(乱搞?) 题面 BZOJ 洛谷 题面自己到洛谷上看把 题解 考场上乱搞拿到了\(90\)分,简直不敢相信. 回家把代码再交了一份直接就\(AC\)了??? ...
- BZOJ3140：[HNOI2013]消毒——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3140 https://www.luogu.org/problemnew/show/P3231 最近在 ...
- TYVJ2032 升降梯上
Description: 开启了升降梯的动力之后,探险队员们进入了升降梯运行的那条竖直的隧道,映入眼帘的是一条直通塔顶的轨道.一辆停在轨道底部的电梯.和电梯内一杆控制电梯升降的巨大手柄.Nescafe ...
- YBT 5.1 区间类动态规划
题解在代码中 石子合并[loj 10147] /* dp[i][j]=max or min(dp[i][j],dp[i][k]+dp[k+1][j]+sum[j]-sum[i-1]) i<=k& ...
- [codeforces/gym/101350/L]维护“凸包”
题目链接:http://codeforces.com/gym/101350/problems 给定n个墙,每个墙有一个高度,要支持动态修改墙的高度和查询这个“容器”能盛多少水. (队友)观察发现,能盛 ...
- [转载][mysql]mysql字符集干货
源地址:http://www.blogjava.net/zyskm/archive/2013/04/09/361888.html 字符集的概念大家都清楚,校对规则很多人不了解,一般数据库开发中也用不到 ...
- Java的位运算符—与（&）、非（~）、或（|）、异或（^）
位运算符主要针对二进制,它包括了:“与”.“非”.“或”.“异或”.从表面上看似乎有点像逻辑运算符,但逻辑运算符是针对两个关系运算符来进行逻辑运算,而位运算符主要针对两个二进制数的位进行逻辑运算.下面 ...
- hdu 4903 The only survival
The only survival http://acm.hdu.edu.cn/showproblem.php?pid=4903 Time Limit: 40000/20000 MS (Java/Ot ...
- Jmeter-6-创建数据库测试计划
1. 将mysql 的jdbc的jar包放到Jmeter lib的目录下. 2. 创建线程组. 3. 创建JDBC Connection Configuration, 提供详细的数据库配置信息. 4. ...
- sudo: /usr/libexec/sudo/sudoers.so must be only be writable by owne
1. chmod 644 sudoers.so 2. pkexec chmod 0440 /etc/sudoers