html的图片移动（js）
<!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）的更多相关文章
- 关于 Cookie-free Domains (为什么将静态图片，js，css存放到单独的域名？)
这篇文章对高性能web开发具有参考性:http://developer.yahoo.com/performance/rules.html 本文主要描述使用裸域名做网站主域名时,如何用子域名做 cook ...
- IIS发布网站之后，页面图片和js未加载出错
[IIS相关]mvc做的web发布之后,运行之后界面上的图片和js都没有加载出来. 解决方案:安装IIS的时候需要勾选ASP选项,否则会出现这种情况. 如果项目是用.Netframework ...
- Grunt压缩图片和JS
今天我们来说一下用Grunt来压缩图片和JS吧! 首先要安装插件: 这是压缩图片的; npm install --save-dev gulp-imagemin 这是压缩JS的: npm install ...
- 网站图片增强JS插件2.0(兼容IE&FF)
网站图片增强JS插件2.0简单介绍:插件可以增强网站互动能力与外链建设,用户在欣赏图片的同时,把看好的图片直接制作成自己喜欢的样式后通过QQ等传播,增强外链建设,通过用户互动创造外链.(支持:放大缩小 ...
- 图片滚动js代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
- HTML5 file API加canvas实现图片前端JS压缩并上传
一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...
- 分享一个延迟加载图片的JS
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 前端开发流程之（线上）绝对地址（图片+css+js）
重要提醒:前端写完-----发邮件通知项目组 1:写好的前段资源包上传到SVN上之后,相关的图片.CSS.js文件要换成线上地址给后台开发. 2:图片-----压缩(https://tinypng.c ...
- 向下滚动页面加载图片的js
js代码 scroll.photo.js : window.imgscroll = { options: { target: null, //插入图片的目标位置 img_list: null, //图 ...
- 不间断图片滚动JS
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-07) MSClass是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...
随机推荐
- ex1.c
- JMS学习九（ActiveMQ的消息持久化到Mysql数据库）
1.将连接Mysql数据库的jar文件,放到ActiveMQ的lib目录下 2.修改ActiveMQ的conf目录下的active.xml文件,修改数据持久化的方式 2.1 修改原来的kshadb的 ...
- 【Python】学习笔记三：序列
sequence(序列) sequence(序列)是一组有序的元素的集合,序列可以有任何元素,也可以没有元素 元组与表的区别:一旦建立,tuple的各个元素不可再变更,而list的各个元素可以再变更 ...
- 二分类算法的评价指标：准确率、精准率、召回率、混淆矩阵、AUC
评价指标是针对同样的数据,输入不同的算法,或者输入相同的算法但参数不同而给出这个算法或者参数好坏的定量指标. 以下为了方便讲解,都以二分类问题为前提进行介绍,其实多分类问题下这些概念都可以得到推广. ...
- npm 错误记录
npm run dev iview-weapp@1.1.0 dev /Users/Jovins/Desktop/小程序/iview-weapp gulp --gulpfile build/build- ...
- centos设置定时删除文件定时清理网站日志
1.进入linux系统 2.在任意目录创建一个sh后缀的文件,如: 3.编辑打开该文件,如图: 4.此时按键盘上的“i”键或者“insert”键,进入编辑模式 输入: #!/bin/shfind /d ...
- leetcode 113 path Sum II 路径和
递归先序遍历+vector<int>容器记录路径 /** * Definition for a binary tree node. * struct TreeNode { * int va ...
- delphi 跨版本DLL调用嵌入窗体实现
delphi 能实现把别的DLL的窗体句柄查到后,贴到PANL之中,此类文章网上不少,而如果是delphi不同版本开发的DLL互调时,一些控件内部的定义有所区别,因为无法(至少目前我觉得理论上不可行) ...
- Selenium学习之==>三种等待方式
在UI自动化测试中,必然会遇到环境不稳定,网络慢的情况,这时如果你不做任何处理的话,代码会由于没有找到元素,而报错.这时我们就要用到wait(等待),而在Selenium中,我们可以用到一共三种等待, ...
- oracle-不完全数据库恢复-被动恢复-ORA-00313/ORA-00366
继上一篇不完全恢复 oracle-不完全数据库恢复-被动恢复-ORA-00313/ORA-00366 场景2:数据库拥有备份,CURRENT状态日志组中所有的在线日志头损坏,在发生日志切换时实例被自动 ...