js制作仿京东购物放大镜效果

html部分:

<div class="itmearea">
			<div class="pic">
				<img src="img/1.jpg" />
				<div class="cover"></div>
			</div>
			<ul class="list">
				<li><img src="img/1.jpg" class="current" /></li>
				<li><img src="img/2.jpg" /></li>
				<li><img src="img/3.jpg" /></li>
				<li><img src="img/4.jpg" /></li>
				<li><img src="img/5.jpg" /></li>
			</ul>
			<div class="deteil"></div>
		</div>

css部分:

body {
				background-color: #D8E7FA;
			}
			
			ul {
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			
			.itmearea {
				position: relative;
				width: 400px;
				height: 480px;
				border: 1px solid #888;
				margin: 100px auto;
			}
			
			.itmearea .pic {
				margin-bottom: 15px;
			}
			
			.itmearea .pic .cover {
				display: none;
				position: absolute;
				cursor: all-scroll;
				left: 0;
				top: 0;
				width: 200px;
				height: 200px;
				opacity: .2;
				z-index: 3;
				background: 50% top no-repeat #000;
			}
			
			.itmearea .pic img {
				width: 400px;
				height: 400px;
			}
			
			.itmearea .list {
				display: flex;
			}
			
			.itmearea .list li {
				margin: auto;
			}
			
			.itmearea .list img {
				display: block;
				width: 50px;
				height: 50px;
			}
			
			.itmearea .deteil {
				position: absolute;
				display: none;
				top: -1px;
				left: 400px;
				width: 500px;
				height: 479px;
				border: 1px solid #888;
				background-image: url(img/1.jpg);
				background-size: 150%;
			}
			
			.itmearea .list .current {
				border: 2px red solid;
			}

js部分:

var list = document.querySelector('.list'),
				imgs = list.querySelectorAll('img'),
				
				img = document.querySelector('.pic img'),
				pic = document.querySelector('.itmearea .pic'),
				cover = document.querySelector('.cover'),
				deteil = document.querySelector('.deteil');
			list.addEventListener('mousemove', function(e) {
				if(e.target.tagName == 'IMG') {
					img.src = e.target.src;
					deteil.style.backgroundImage = 'url(' + e.target.src + ')';
					imgs.forEach(function(item) {
						item.className = '';
					})
					e.target.className = 'current';

				}
			})
			pic.addEventListener('mousemove', function(e) {
				var x = e.clientX,
					y = e.clientY,
					cx = pic.getBoundingClientRect().left,
					cy = pic.getBoundingClientRect().top,
					tx = x - cx - 100,
					ty = y - cy - 100;
				if(tx < 0) {
					tx = 0;
				}
				if(ty < 0) {
					ty = 0;
				}
				if(tx > 200) {
					tx = 200;
				}
				if(ty > 200) {
					ty = 200;
				}
				cover.style.display = 'block'
				deteil.style.display = 'block'
				deteil.style.backgroundPosition = tx / 200 * 100 + '% ' + ty / 200 * 100 + '%';
				cover.style.left = tx + 'px';
				cover.style.top = ty + 'px';
			})
			pic.addEventListener('mouseout', function() {
				cover.style.display = 'none'
				deteil.style.display = 'none'
			});

效果: