一、描述
展示商品图片的细节时，预览的时候想要等比例的放大、缩小展示所在图片的区域细节。
二、实现思路
2.1 页面元素原图、大图片、小图片、悬浮的元素(放大镜缩小镜)
<div id="small-box">
<!--悬浮元素-->
<div id="float-box"></div>
<!--原图-->
<img src="http://localhost:8075/webroot/help/picture/1.jpg" /></div>
<!--大图片-->
<div id="big-box">
<img src="http://localhost:8075/webroot/help/picture/2.jpg"/></div>
<!--小图片-->
<div id="smaller-box">
<img src="http://localhost:8075/webroot/help/picture/3.jpg"/></div>
2.2 放大/缩小的原理通过监控鼠标移入、移出、在原图片上移动，获取在图片的位置，定位大/小图片的相应位置。
onmouseover鼠标移入
onmouseout鼠标移出
onmousemove鼠标移动
三、示例
3.1 模板页面设置通过超链接设置动态参数确定图片放大还是缩小
![]()
3.2 添加初始化后事件
![]()
js代码：
setTimeout(function(){
var objSmallBox = document.getElementById("small-box");
var objFloatBox = document.getElementById("float-box");
var objBigBox = document.getElementById("big-box");
var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
var objsmallerBox = document.getElementById("smaller-box");
var objsmallerBoxImage = objsmallerBox.getElementsByTagName("img")[0];
//鼠标移入，悬浮元素显示，参数a为1大图片显示，参数a为0小图片显示
objSmallBox.onmouseover = function () {
objFloatBox.style.display = "block"
if(a==1)
{
objBigBox.style.display = "block"
}
if(a==0){
objsmallerBox.style.display = "block"
}
}
// 鼠标移出，悬浮元素、大图片、小图片隐藏
objSmallBox.onmouseout = function () {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
objsmallerBox.style.display = "none"
}
objSmallBox.onmousemove = function (ev) {
// 鼠标在图片移动，定位取鼠标的位置
var _event = ev || window.event; //兼容多个浏览器的event参数模式
// left为鼠标的x轴-小图片距离浏览器页面的左边距-悬浮元素的宽度/2
var left = _event.clientX - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2;
// top鼠标的Y轴-小图片距离浏览器页面的上边距-悬浮元素的高度/2
var top = _event.clientY - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2;
//定义悬浮元素的移动范围
if (left < 0) {
left = 0;
} else if (left > (objSmallBox.offsetWidth - objFloatBox.offsetWidth)) {
left = objSmallBox.offsetWidth - objFloatBox.offsetWidth;
}
if (top < 0) {
top = 0;
} else if (top > (objSmallBox.offsetHeight - objFloatBox.offsetHeight)) {
top = objSmallBox.offsetHeight - objFloatBox.offsetHeight;
}
objFloatBox.style.left = left + "px";
objFloatBox.style.top = top + "px";
//悬浮元素距离原图的左边距/(原图片的宽度 - 悬浮元素的宽度)=大图片距离BigBox的左边距/(BigBox的宽度-大图片的宽度)
//宽度比例系数=left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth)
//高度的比例系数=top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight)
var percentX = left / (objSmallBox.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objSmallBox.offsetHeight - objFloatBox.offsetHeight);
if(a==1)
{
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px";
}
if(a==0)
{
objsmallerBoxImage.style.left = -percentX * (objsmallerBoxImage.offsetWidth - objsmallerBox.offsetWidth) + "px";
objsmallerBoxImage.style.top = -percentY * (objsmallerBoxImage.offsetHeight - objsmallerBox.offsetHeight) + "px";
}
}
},100);
3.3 引入css样式
![]()
四、 效果查看
![]()
编辑于 2021-6-19 22:28
编辑于 2021-6-19 22:29
编辑于 2021-6-19 22:30
|
