码迷,mamicode.com
首页 > Web开发 > 详细

HTML5图片预览 放大

时间:2018-02-01 00:06:00      阅读:261      评论:0      收藏:0      [点我收藏+]

标签:value   overflow   doctype   pad   sub   rap   lis   efault   absolute   

<!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图片预览 放大

标签:value   overflow   doctype   pad   sub   rap   lis   efault   absolute   

原文地址:https://www.cnblogs.com/qiaoxinming/p/8394872.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!