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封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...
随机推荐
- HDU1026--Ignatius and the Princess I（BFS记录路径）
Problem Description The Princess has been abducted by the BEelzebub feng5166, our hero Ignatius has ...
- 源码阅读-JLRoutes路由设置
最后更新: 2018-1-20 JLRoutes 是在 github 上 Star 比较多的一个, 在各大平台也有介绍, 一些知识可以参考到下面的连接查看. 本文仅仅作为我的思考以及对应的心得; 一. ...
- uiautomatorviewer报错 Error taking device screenshot: EOF
报以下错误 估计是端口冲突 解决方法: 1. netstat -ano | findstr 5037 查看占用5037端口的进程 2. taskkill /pid 10508 /f 杀掉此进程 3 ...
- [CSP-S模拟测试]:简单的括号序列（组合数）
题目传送门(内部题82) 输入格式 一行一个字符串$ss$,保证$ss$中只包含$'('$和$')'$. 输出格式 一行一个整数,表示满足要求的子序列数对$10^9+7$的结果. 样例 样例输入1: ...
- 当遇到npm ERR! Unexpected end of JSON input while parsing near……时的解决办法
运行npm install时有时会遇到以下错误: npm ERR! Unexpected end of JSON input while parsing near ... 这时可以先执行下面的命令: ...
- 第四周实验总结&实验报告
实验二 Java简单类与对象 实验目的 掌握类的定义,熟悉属性.构造函数.方法的作用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实例的方法和属性 ...
- mysql-8.0解压缩版安装配置完整过程
https://www.cnblogs.com/xiongzaiqiren/p/8970203.html
- 微信小程序 API 基础
其实还有一些组件,没有提,因为那些组件跟 API 的功能差不多,API 可能比他会更好一点: 具体可见官方文档 基础: 判断接口是否可用:wx.canIUse(a) a 代表:接口名字 返回值:布尔 ...
- Unity3D 连接MySql
MySql安装如下: https://www.cnblogs.com/dlvguo/p/9671832.html Unity连接MySql首先要在Unity的安装目录D:\Unity2017\Edit ...
- IntelliJ IDEA调试时，格式化显示日期变量
格式化前: 格式化后: new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(this); 入门常用知识: Ct ...