<!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. PAT Advanced 1010 Radix(25) [⼆分法]

    题目 Given a pair of positive integers, for example, 6 and 110, can this equation 6 = 110 be true? The ...

  2. LeetCode No.160,161,162

    No.160 GetIntersectionNode 相交链表 题目 编写一个程序,找到两个单链表相交的起始节点. 如下面的两个链表: 在节点 c1 开始相交. 示例 输入:intersectVal ...

  3. c语言中多维数组和指针的关系

    如图: 执行结果: 说明:由执行结果可知,三个输出的结果相等(可能在不同的平台执行结果不相同,但三个的结果是相等的),数组multi的地址与数组multi[0]的地址相同,都等于存储的第一个整数的地址 ...

  4. UML-逻辑架构和包图-概述

    回顾前几章学习了用例模型,本章开始学习设计模型.

  5. Unicode的认识

    Unicode(统一码.万国码.单一码),它是为解决传统的字符编码方案的局限而产生的,它为每种语言中的每个字符设定了统一并且唯一的二进制码,以满足跨语言跨平台进行文本转换.处理的要求.1990年开始研 ...

  6. C++随机迷宫生成[转载]

    原文:http://tieba.baidu.com/p/2596809144 #include<iostream.h> #include"time.h" #includ ...

  7. Vue 项目中应用

    Vue使用 一.vue生命周期 # main.js import Vue from 'vue' import App from './App.vue' import router from './ro ...

  8. Ubuntu目錄

    /         (这就是著名的根)├── bin         (你在终端运行的大多数程序,比如cp.mv...)├── boot         (内核放在这里,这个目录也经常被作为某个独立分 ...

  9. RDD(二)——创建

    RDD的创建 1)从内存中创建 从集合中创建RDD,Spark主要提供了两种函数:parallelize和makeRDD val raw: RDD[Int] = sc.parallelize(1 to ...

  10. 正则表达式中 /s 可以帮助“.”匹配所有的字符，包括换行，从而实现【\d\D】的功能

    正则表达式中 /s 可以帮助“.”匹配所有的字符,包括换行,从而实现[\d\D]的功能