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封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...
随机推荐
- 使用WebStorm运行vue项目
在WebStorm中怎么打开一个已有的项目,这个不用多说,那么如何运行一个vue项目呢? 1.点击下图中右上角的红框. 2.在出现的弹框中选中左上角“+”下的“npm”,如下图所示. 3.选中第二步的 ...
- sqli-labs(6)
双注入GET双引号字符型注入 0x01(这里思路和05一样只是单引号变成了双引号) 首先我们看见这个网站 又是不显示值的 所以想到用报错的信息来得出你想要的结果 有了思路之后来试试一下吧 先填入单引号 ...
- [CSP-S模拟测试]:bird（线段树优化DP）
题目传送门(内部题89) 输入格式 第一行两个数$n$和$k$,分别表示小鸟的只数和$R$装弹时间.接下来$n$行,每行两个数$l,r$表示$n$只小鸟初始时的头和尾的$x$坐标. 输出格式 输出一个 ...
- 二分类算法的评价指标：准确率、精准率、召回率、混淆矩阵、AUC
评价指标是针对同样的数据,输入不同的算法,或者输入相同的算法但参数不同而给出这个算法或者参数好坏的定量指标. 以下为了方便讲解,都以二分类问题为前提进行介绍,其实多分类问题下这些概念都可以得到推广. ...
- pymysql 处理数据的几种方式
1.表中提取数据 sql = "SELECT * FROM table WHERE name='%s'AND time='%s'" % (name,time)多个选择条件用AND连 ...
- jquery.fileupload-image-editor.js
jquery.fileupload-image-editor.js中 _initEventHandlers: function () { this._super(); var handlers = { ...
- IFG以太网帧间隙
交换机的线速 描述交换机性能可以使用“线速”这个概念,那它是什么意思呢?所谓的线速是指经过交换机处理的理想状态下最大数据率.描述数据率可以用bps(bit per second)和mpps(milli ...
- Html/CSS 初步介绍html和css部分重要标签
&初步介绍html和css部分重要标签& 注:开头书写:<!DOCTYPE html>表明对应标准html代码 先行总结重点 下方给出具体 CSS: 1. position ...
- .Net 逆向 Reflector之reflexil使用
网上下载了一款商用的教育培训类软件,是用.Net写的,标榜的是免费的,但是只能试用一个月,商家很精明,用此方法推广招揽客户,但是公司在这一块却没有预算购买,一开始就想着既然是商用软件,安全机制做的肯定 ...
- Selenium学习之==>WebDriverApi接口详解
浏览器操作 driver.back() # 后退 driver.forward() # 前进 driver.refresh() # 刷新 窗口操作 driver.get_window_size() # ...