<!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" >
???????????<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" >
???????????</div>
???????</div>
???</div>
</body>
<script>
</script>
</html>
HTML5图片预览 ?放大
原文地址：https://www.cnblogs.com/qiaoxinming/p/8394872.html