<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片预览</title>
<style>
* {
margin: 0;
padding: 0;
}
 
.picture {
margin: 20px;
position: relative;
}
 
#show {
position: absolute;
top: 0;
left: 0;
width: 98px;
height: 98px;
border: 1px solid #e8e8e8;
background: #fff;
opacity: .5;
}
 
.wrap {
width: 198px;
height: 198px;
border: 1PX solid #e8e8e8;
margin-bottom: 10px;
}
 
.wrap img {
width: 100%;
height: 100%;
}
 
.subWrap {
width: 298px;
height: 298px;
overflow: hidden;
position: relative;
border: 1px solid #e8e8e8;
}
 
.sub {
position: absolute;
top: 0;
left: 0;
width: 598px;
height: 598px;
}
 
.sub img {
width: 100%;
height: 100%;
}
</style>
<script>
window.onload = function() {
function p(arg) {
console.log(arg);
}
let file = document.querySelector('#file'),
picture = document.querySelector('.picture'),
wrap = document.querySelector('.wrap'),
sub = document.querySelector('.sub'),
show = document.getElementById('show'),
showTop = 0,
showLeft = 0,
moveTop = 0,
moveLeft = 0;
function move() {
show.onmousemove = function(ev) {
let e = ev || window.event;
e.stopPropagation();
e.preventDefault();
moveTop = e.clientY - picture.offsetTop - wrap.offsetTop - show.offsetHeight / 2;
moveLeft = e.clientX - picture.offsetLeft - wrap.offsetLeft - show.offsetWidth / 2;
p(moveLeft);
if (moveTop < 0) {
show.style.top = '0px';
console.log('上');
} else if (moveLeft < 0) {
show.style.left = '0px';
console.log('左');
} else if (moveTop > 100) {
show.style.top = '100px';
console.log('上2');
} else if (moveLeft > 100) {
show.style.left = '100px';
console.log('左2');
} else {
show.style.top = moveTop + 'px';
show.style.left = moveLeft + 'px';
sub.style.top = -moveTop * 3 + 'px';
sub.style.left = -moveLeft * 3 + 'px';
}
}
show.onmouseup = function() {
this.onmousemove = null;
}
}
file.addEventListener('change', function() {
let reader = new FileReader(),
img = wrap.querySelector('img'),
subImg = sub.querySelector('img');
reader.readAsDataURL(this.files[0]);
reader.onloadend = function() {
img.src = this.result;
subImg.src = this.result
}
}, false);
move();
}
</script>
</head>
<body>
<div class="picture">
<div class="wrap">
<img src="C:\Users\Administrator\Desktop\test.jpg" alt="">
<div id='show'></div>
</div>
<input id="file" class="upload" type="file" value="">
<div class="subWrap">
<div class="sub">
<img src="C:\Users\Administrator\Desktop\test.jpg" alt="">
</div>
</div>
</div>
</body>
<script>
</script>
</html>

HTML5图片预览 放大的更多相关文章

  1. 如何在HTML5 图片预览

    HTML5的 File API允许浏览器访问本地文件系统,借助它我们可以实现以前无法实现的本地图片预览功能. 先介绍下该API实现了那些接口: 1.Blob接口,表示原始的二进制数据,通过它可以访问到 ...

  2. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

  3. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  4. 微信企业号办公系统-图片预览放大功能-previewImage

    在微信里看过文章的应该知道,文章里的图片点击后可以放大.分享和保存. 然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调 ...

  5. HTML5图片预览

    两种方式实现 URL FileReader <!DOCTYPE HTML><html>    <head>    <meta charset="ut ...

  6. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  7. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  8. js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. Ionic实战三:Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

    这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...

随机推荐

  1. 吴裕雄--天生自然Linux操作系统:Linux 文件与目录管理

    Linux的目录结构为树状结构,最顶级的目录为根目录 /. 其他目录通过挂载可以将它们添加到树中,通过解除挂载可以移除它们. 绝对路径: 路径的写法,由根目录 / 写起,例如: /usr/share/ ...

  2. sol - 0x60,61,62

    [例题]走廊泼水节 设当前扫描到边x,y,长度为z,x所处的并查集为Sx,y所处的并查集为Sy: 对于任意u属于Sx,v属于Sy,我们可以知道u,v之间必连一条边 但是我们要在保证x,y之间的边属于唯 ...

  3. redis day03 下

    事务 能够有回退状态 事务命令 安命令执行没问题,redis是弱事务型 nulti incr n1   -->QUEUED(返回仅队列了) EXEC -->返回结果 pipeline 流水 ...

  4. 理解ClassLoader工作机制

    package com.ioc; public class Test { public static void main(String[] args) throws ClassNotFoundExce ...

  5. msgfmt - 翻译汉化

    说明 目前大部分自由软件实现国际化使用的是gettext. 国际化就是让程序可以使用多国语言来显示程序里的字符串. 程序里一般都有很多字符串,菜单名也好,错误信息也好,都是字符串.假设字符串为stri ...

  6. mqtt协议系统设计参考

    作者:极寒链接:https://zhuanlan.zhihu.com/p/28525517来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾自己的工作经历最遗憾的是没 ...

  7. ubuntu 更新源 或者 apt-get install 出错404 not found ,Failed to fetch

    1.考虑是不是能上网 2.用apt-get update ,然后再试试apt-get install 如果apt-get update 也出现很多 404 not found 或者 failed to ...

  8. iOS 清理文件缓存

    本文摘自:<msp的昌伟哥哥-iOS开发-清理缓存功能的实现>摘下来的目的就是为了能够学习.还望看到文章的同学,前往原创的博客园.感谢msp的昌伟哥哥的分享精神. 移动应用在处理网络资源时 ...

  9. 十四、linux-MySQL的数据库集群读写分离及高可用性、备份等

    一.数据库集群及高可用性 二.mysql实现读写分离 mysql实现读写分离有多种方式: 1)代码语言(php\python\java等)层面实现读写分离,找开发进行实现. 2)通过软件工具实现读写分 ...

  10. 吴裕雄--天生自然C语言开发:作用域规则

    #include <stdio.h> int main () { /* 局部变量声明 */ int a, b; int c; /* 实际初始化 */ a = ; b = ; c = a + ...