js放大镜（图片放大）

js图片放大

1.结构部分

<div class="box" id="box"><div class="small">//要放大的图片<img src="data:image/higher.jpeg" width="350" alt="" />//放大镜<div class="mask"></div></div>//显示图片<div class="big"><img src="data:image/higher.jpeg" alt="" /></div>
</div>

2.js部分

<script>let box = $('box');let smallBox = box.children[0];let bigBox = box.children[1];let smallImage = smallBox.children[0];let mask = smallBox.children[1];let bigImage = bigBox.children[0];box.onmouseenter = function () {mask.style.display = 'block';bigBox.style.display = 'block';}box.onmouseleave = function () {mask.style.display = 'none';bigBox.style.display = 'none';}box.onmousemove = function (e) {// 兼容e = e || window.event;// 获取鼠标移动时mask距离box的距离let maskX = e.pageX - box.offsetLeft;let maskY = e.pageY - box.offsetTop;// console.log(box.offsetLeft,smallBox.offsetLeft);// 不能使用smallBox的offset距离，smallBox为相对定位，smallBox相对于box的offsetLeft与offsetTop始终为0// 向左、上分别移动一半遮罩层的宽高，以实现鼠标在遮罩层中间的效果maskX = maskX - mask.offsetWidth / 2;maskY = maskY - mask.offsetHeight / 2;// console.log(box.offsetWidth,box.offsetHeight);let maskMaxLeft = box.offsetWidth - mask.offsetWidth; //获取mask的最大left距离let maskMaxTop = box.offsetHeight - mask.offsetHeight; //获取mask的最大top距离// 保证mask的left距离始终在0-maskMaxLeft之间，即保证x轴上mask始终在box中maskX = maskX < 0 ? 0 : maskX;maskX = maskX > maskMaxLeft ? maskMaxLeft : maskX;// 保证mask的top距离始终在0-maskMaxTop之间，即保证y轴上mask始终在box中maskY = maskY < 0 ? 0 : maskY;maskY = maskY > maskMaxTop ? maskMaxTop : maskY;// 赋值mask.style.left = maskX + 'px';mask.style.top = maskY + 'px';// mask在box中移动的距离与bigImage在bigBox中显示的位置成正比例// maskX/maskMaxLeft=bigImageX/bigImageMaxLeft// maskY/maskMaxTop=bigImageY/bigImageMaxToplet bigImageMaxLeft = bigImage.offsetWidth - bigBox.offsetWidth; //获取bigImage的最大left距离let bigImageMaxTop = bigImage.offsetHeight - bigBox.offsetHeight; //获取bigImage的最大top距离// 由公式可得let bigImageX = maskX / maskMaxLeft * bigImageMaxLeft;let bigImageY = maskY / maskMaxTop * bigImageMaxTop;// bigImage为相对定位，因此bigImage的top和left应为负值才可实现效果bigImage.style.left = -bigImageX + 'px';bigImage.style.top = -bigImageY + 'px';}</script>

3.封装的方法

// $通过id获取元素
function $(id) {return document.getElementById(id)
}// 获取min-max之间的数字
function getRandomNumber(min, max) {min = Math.ceil(min);max = Math.floor(max);return Math.floor(Math.random() * (max - min - 1) + min)
}// 获取随机颜色
function getRandomColor() {let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)return `rgb(${r},${g},${b})`
}// 获取当前日期时间
function CurrentDatetime() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();var second = date.getSeconds();var time = `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')}`// var time = `${hour.toString().padStart(2,'0')}:${minute.toString().padStart(2,'0')}:${second.toString().padStart(2,'0')}`;// var time = `${year}-${month.toString().padStart(2,'0')}-${day.toString().padStart(2,'0')} ${hour.toString().padStart(2,'0')}:${minute.toString().padStart(2,'0')}:${second.toString().padStart(2,'0')}`;return time;
}// 获取距离时间
function getBetweenTime(dateTime) {// 指定日期和时间var endTime = new Date(dateTime);// 当前系统时间var nowTime = new Date();var t = endTime.getTime() - nowTime.getTime();var d = Math.floor(t / 1000 / 60 / 60 / 24);var h = Math.floor(t / 1000 / 60 / 60 % 24);var m = Math.floor(t / 1000 / 60 % 60);var s = Math.floor(t / 1000 % 60);// var html = d + " 天" + h + " 时" + m + " 分" + s + " 秒";var html = [d.toString().padStart(2,'0'),h.toString().padStart(2,'0'),m.toString().padStart(2,'0'),s.toString().padStart(2,'0')];return html
}// 获取页面滚动条距离左侧和顶部的距离
function getScroll(){var scrollLeft=document.body.scrollLeft||document.documentElement.scrollLeft;var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;return {scrollLeft:scrollLeft,scrollTop:scrollTop}
}

js放大镜（图片放大）相关推荐

html如何控制图片自动放缩,如何用js控制图片放大缩小
js控制图片放大缩小的效果,可以通过JavaScript的width和height属性来实现.其属性可以实现按比例放大和缩小图像尺寸的功能. 在前面的文章中,也为大家介绍了JS获取图片当前宽高和JS获 ...
js hover图片放大不遮挡_CSS3+JS 实现放大镜
注意: 看懂本文需要: 懂中文 :) 学习过 JavaScript 和 css 代码较长,框框可左右滑动哦您的观看和点赞是对本公众号最大力的支持 ~~ 原文链接: https://blog.csdn ...
js实现图片放大缩小功能
在web项目中,用到js来实现图片的放大缩小功能,在这里是通过zoomify来实现,并在这个基础上进行二次改进,已达到更满意的效果. 1.下面是展示的效果: 通过对zoomifyjs改进,达到上述效果 ...
js实现图片放大特效
HTML代码如下: <div class="box"><div class="pic1"> < ...
JS实现图片放大查看
示例:https://wumaozheng.com/static-pages/image-magnifier.html 1 <!DOCTYPE html> 2 <html> 3 ...
js实现图片放大预览（jq+css)
阔别四个月我又杀回来了,公司最近接了个前后端分离的项目,前端居然是java的目录结构, 我丢藕!!!我个写前端vue的怎么活
zShowBox (图片放大展示jquery版兼容性好)
zShowBox : 图片放大展示简单舒服快速兼容性好 zShowBox.js /* * zShowBox (图片放大展示) */ function zShowBox(domChunk) ...
JavaScript 生成弹性透明的图片放大代码
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
js实现放大镜效果(图片放大)—JavaScript
今天来做一个非常常见且有意思的的案例,就是我们的鼠标经过图片放大的一个效果! 具体实现的效果看下面这张图案例分析: 黄色的遮挡层跟随鼠标功能. 把鼠标坐标给遮挡层不合适.因为遮挡层坐标以父盒子为准 ...

js放大镜（图片放大）

js放大镜（图片放大）相关推荐

最新文章

热门文章