<!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. CodeForces - 1243D. 0-1 MST(补图连通分量个数)

    Ujan has a lot of useless stuff in his drawers, a considerable part of which are his math notebooks: ...

  2. PAT Basic 1132 数列的⽚段和(20) [数学问题-简单数学]

    题目 给定⼀个正数数列,我们可以从中截取任意的连续的⼏个数,称为⽚段.例如,给定数列{0.1, 0.2, 0.3,0.4},我们有(0.1) (0.1, 0.2) (0.1, 0.2, 0.3) (0 ...

  3. Linux学习(二) --- 常用命令

    [TOC] 一.常用命令 1.目录 cd切换 cd 路径 切换到指定路径 cd .. 上一级 mkdir:创建目录 mkdir 目录名 pwd:查看 2.查看 ll命令:查询目录内容 ll 查看当前( ...

  4. 运行SQL文件报错Invalid ON UPDATE clause for 'create_date' column

    Invalid ON UPDATE clause for 'create_date' column   原因: 高版本的mysql导数据到低版本出现的问题 日期类型报错 MySQL 5.5 每个表只允 ...

  5. Linux-守护进程的引入

    1.进程查看命令ps (1).ps -ajx 偏向显示各种有关的ID号 (2).ps -aux 偏向显示进程各种占用资源 2.向进程发送信号指令kill (1).kill -信号编号  进程ID,向一 ...

  6. 如何把word文档导入到数据库中——java POI

    本文方法借鉴于https://www.cnblogs.com/ljysy/p/10574197.html 在经过朋友的指导下,在处理文档的方式上有所不同. 我的数据库使用的是SQL server,这篇 ...

  7. WebServerFactoryCustomizer set the port, address, error pages etc.

    package com.ioc; import org.springframework.boot.SpringApplication; import org.springframework.boot. ...

  8. Opencv笔记（二十一）——傅里叶变换

    参考 Numpy 中的傅里叶变换 首先我们看看如何使用 Numpy 进行傅里叶变换.Numpy 中的 FFT 包可以帮助我们实现快速傅里叶变换.函数 np.fft.fft2() 可以对信号进行频率转换 ...

  9. [CTS2019]无处安放（提交答案）

    由于蒟蒻太菜没报上CTS,只能在家打VP. 感觉这题挺有意思的,5h中有3h在玩这题,获得74分的“好”成绩. 说说我的做法吧: subtask1~3:手玩,不知道为什么sub2我只能玩9分,但9和1 ...

  10. Sqlite教程(1) SQLiteOpenHelper

    首先,创建DbHelper对象,继承SQLiteOpenHelper. Configuration是自行创建的工具类,里面都是App的一些环境设置. public class DbHelper ext ...