您的位置：首页 > Web前端 > JavaScript

原生js实现淘宝图片放大功能

2018-01-06 14:42 573 查看

目录结构：

HTML:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片放大</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js" defer async></script>
</head>
<body>
<div id="container">
<div class="leftView">
<div class="mask"></div>
<img class="small" src="./img/img.jpg">
</div>
<div class="rightView">
<img class="big" src="./img/img.jpg">
</div>
</div>
</body>
</html>

CSS:

@charset "utf-8";

html, body {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
box-sizing: border-box;
}
#container {
position: relative;
top: 60px;
left: 200px;
}
#container .leftView {
width: 400px;
height: 400px;
}
#container .leftView .mask {
width: 160px;
height: 160px;
position: absolute;
display: none;
cursor: move;
top: 0;
left: 0;
background: rgba(50, 153, 248, 0.4);
}
#container .leftView .small {
width: 100%;
height: 100%;
}
#container .rightView {
width: 400px;
height: 400px;
display: none;
position: absolute;
top: 0;
left: 450px;
overflow: hidden;
}
#container .rightView .big {
position: absolute;
top: 0;
left: 0;
}

JS:

((function() {
'use strict'
// 选择器
function $(el) {
return document.querySelector(el)
}
// 获取元素
let container = $('#container')
let leftView = $('.leftView')
let mask = $('.mask')
let smallImg = $('.small')
let rightView = $('.rightView')
let bigImg = $('.big')
// 显示放大遮罩与放大的图片容器
leftView.addEventListener('mouseover', function() {
mask.style.display = 'block'
rightView.style.display = 'block'
}, false)
// 隐藏放大遮罩与放大的图片容器
leftView.addEventListener('mouseout', function() {
mask.style.display = 'none'
rightView.style.display = 'none'
})
// 放大遮罩移动放大图片
leftView.addEventListener('mousemove', function(evt){
evt = evt || window.event
// 获取当前鼠标的位置
let currentMouseX = evt.pageX
let currentMouseY = evt.pageY
// 获取要放大图片左侧与顶部的偏移距离
let offsetLeft = container.offsetLeft
let offsetTop = container.offsetTop
// 获取放大遮罩的大小
let maskWidth = mask.offsetWidth
let maskHeight = mask.offsetHeight
// 计算鼠标移动后放大遮罩的位置 位置 = 当前鼠标的位置 - 偏移距离 - 放大遮罩大小/2
let zoomMaskX = currentMouseX - offsetLeft - maskWidth / 2
let zoomMaskY = currentMouseY - offsetTop - maskHeight / 2
// 限制鼠标上侧与左侧的范围
if (zoomMaskX <= 0) {
zoomMaskX = 0
}
if (zoomMaskY <= 0) {
zoomMaskY = 0
}
// 限制鼠标右侧与下侧的范围
let maxScopeX = leftView.offsetWidth - maskWidth
if (zoomMaskX >= maxScopeX) {
zoomMaskX = maxScopeX
}
let maxkScopeY = leftView.offsetHeight - maskHeight
if (zoomMaskY >= maxkScopeY) {
zoomMaskY = maxkScopeY
}
mask.style.left = zoomMaskX + 'px'
mask.style.top = zoomMaskY + 'px'
// 计算图片放大比例 比例= (大图长度 - 大图父容器长度) / (小图父容器长度 - 放大遮罩长度)
let zommProportion = (bigImg.offsetWidth - rightView.offsetWidth) / (leftView.offsetWidth - maskWidth)
bigImg.style.left = -zommProportion * zoomMaskX + 'px'
bigImg.style.top = -zommProportion * zoomMaskY + 'px'
}, false)
})())

效果如下: 点击查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript Js Web

相关文章推荐

新的分享

章节导航