<!DOCTYPE html>
<html>
<style>
*{padding: 0;margin: 0}
#open{
width: 300px;
height: 300px;
background-color: brown;
position: relative;
border-radius:50%;

}
#dv {
width:100px;
height:100px;
/*background-color:blue;*/
border-radius:50%;
position:relative;
}
</style>
<body>

<!--draggable 是否禁止拖曳-->
<img id="dv" src="http://temp.im/250x250/4CD964/fff" draggable="false" />
<br>
<!--<div id="open"></div>-->

<p id="img-left"></p>
<p id="img-top"></p>
<script>
//图像移动方法
function ImgMove(ImgId){
//获取元素

var dv = document.getElementById(ImgId);
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
//鼠标按下事件
dv.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;

//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
}
//鼠标移动
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//获取x和y
var nx = e.clientX;
var ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);

dv.style.left = nl + 'px';
dv.style.top = nt + 'px';

document.getElementById("img-left").innerHTML=dv.style.left.toString();
document.getElementById("img-top").innerHTML=dv.style.top.toString();

}
//鼠标抬起事件
dv.onmouseup = function() {
//开关关闭
isDown = false;
dv.style.cursor = 'default';
}

}

ImgMove('dv');

</script>
<script>
function ImgInto(num1Id){
var num1 = document.getElementById(num1Id);

return num1.style.top.toString();
}

</script>
</body>
</html>

html的图片移动（js）的更多相关文章

  1. 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)

    这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...

  2. IIS发布网站之后，页面图片和js未加载出错

    [IIS相关]mvc做的web发布之后,运行之后界面上的图片和js都没有加载出来.      解决方案:安装IIS的时候需要勾选ASP选项,否则会出现这种情况. 如果项目是用.Netframework ...

  3. Grunt压缩图片和JS

    今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...

  4. 网站图片增强JS插件2.0(兼容IE&FF)

    网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小 ...

  5. 图片滚动js代码

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. HTML5 file API加canvas实现图片前端JS压缩并上传

    一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

  7. 分享一个延迟加载图片的JS

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. 前端开发流程之（线上）绝对地址（图片+css+js）

    重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...

  9. 向下滚动页面加载图片的js

    js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...

  10. 不间断图片滚动JS

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-07) MSClass是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...

随机推荐

  1. （51）LINUX应用编程和网络编程之六Linux高级IO

    3.6.1.非阻塞IO 3.6.1.1.阻塞与非阻塞 阻塞:阻塞具有很多优势(是linux系统的默认设置),单路IO的时候使用阻塞式IO没有降低CPU的性能 补充:阻塞/非阻塞, 它们是程序在等待消息 ...

  2. C# Cache缓存的应用

    缓存类Cache的使用 直接先上代码 public class CacheHelper { private static string fileName = @"D:\huage.txt&q ...

  3. Unity PlayerPrefs 存储的位置

    Mac OS 在Mac OS X上PlayerPrefs是存储在~/Library/Preferences文件夹,名为unity.[company name].[product name].plist ...

  4. oracle 数据库优化【转载】

    版权声明:本文为CSDN博主「咫尺的梦想ing」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/u01305 ...

  5. Linux shell - shift命令用法(转载)

    位置参数可以用shift命令左移.比如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1.$2.$3丢弃,$0不移动.不带参数的shift命令相当于shift 1. 非常 ...

  6. ScvQ的技术栈

    前端:spring mybatis hibernate struts2 SpringMVC echache quartz 后台:servlet jsp jdbc io html css javascr ...

  7. 线对 Line pairs、LP（分辨率cy/mm）

    线对 (Line pairs) 是胶片.镜头等电影摄影领域的专用名词. 每毫米线对一般指分辨率的单位,指仪器在一毫米内能分辨出多少对线. 在一定尺度内的可分辨线对数常被用来衡量仪器的空间分辨能力,能分 ...

  8. Spring 之 IOC ，DI 理论

    本文是依照极客学院java<Spring之IOC>章节学习的心得.随笔记录 浅谈IOC:(Inversion of Control, 控制反转) Spring 核心容器,贯穿始终.所谓IO ...

  9. PushConsumer 消费消息

    CLUSTERING 模式下,消费者会订阅 retry topic // DefaultMQPushConsumerImpl#copySubscription private void copySub ...

  10. delphi DLL image 动态绘图 句柄处理

    在调用DLL 动态在T Image 绘图时,传入  Image.Canvas.Handle 后,却总是绘不上,有时偶尔能绘上,却没搞清原因,而同样的代码,传入窗体的 Handle ,绘图却正常. 经过 ...