<!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. 3.redis认证

    redis认证方法 1.redis.conf requirepass PASSWORD 2.redis-cli auth PASSWORD redis清空数据库 flushdb //清空当前数据库 f ...

  2. PAT Advanced 1041 Be Unique (20) [Hash散列]

    题目 Being unique is so important to people on Mars that even their lottery is designed in a unique wa ...

  3. keyword排序-Es问题

    问题:mapping索引registerordercount字段设置为keyword,但是在进行倒序排的视乎发现,没有按预期排序. keyword类型: "registerordercoun ...

  4. Centos7安装Xrdp远程桌面

    Xrdp是Microsoft远程桌面协议RDP的一个开源实现,它允许以图像方式控制远程系统. 测试环境 服务端: CentOS Linux release 7.7.1908 (Core) 客户端: W ...

  5. 利用 wave 库 对音频进行格式处理

    import wave r = r"D:\沫沫酱 - 旧伤口.wav" # 一个.wav格式文件 with wave.open(r, "rb") as f: # ...

  6. StartDT AI Lab | 智能运筹助力企业提升决策效率、优化决策质量

    在人工智能和大数据时代,越来越多的云上数据和越来越智能的模型开始辅助人们做出各种最优决策,从运营效率.成本节约.最优配置等方方面面,实现降本增效,进一步提升商业效率.京东.美团.滴滴.顺丰等众多知名厂 ...

  7. elasticsearch 大集群,双重别名，滚动更新分词方案

    elasticsearch 滚动更新分词 国内用ik.hanlp.ansj或基于其二次开发的比较多 必然有分词变更的操作(主要是是加词) reindex+别名可以解决一部分问题,但在大集群上会影响业务 ...

  8. Multiple alleles|an intuitive argument|

    I.5 Multiple alleles. 由两个等位基因拓展到多个等位基因,可以得到更多种二倍体基因型: 所以单个等位基因的概率(用i代指某个基因,pi*是该基因的频率)是(以计数的方法表示) 所以 ...

  9. OpenSSL EVP_Digest系列函数的一个样例

    #include <stdio.h>     #include <openssl/evp.h>         main(int argc, char *argv[])     ...

  10. Java多线程常见概念

    进程和线程的区别 进程是资源分配的最小单位,线程是CPU调度的最小单位 线程不能看做独立应用,而进程可以 进程有独立的地址空间,互相不影响,线程只是进程的不同执行路径 线程没有独立的地址空间,多进程的 ...