图片预览

* {

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%;

}

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();

}