放大镜效果是很常见的一种效果,例如淘宝,京东之类的购物商城里面经常会看到这种效果。
下面附上一张效果图:
好了,不要再看了,美女有那么好看吗?咱们来看代码好不好( o=^•ェ•)o ┏━┓:
html布局:
(图片需要自己找哦 ㄟ( ▔, ▔ )ㄏ)
<div id="demo">
<div id="small-box">
<!-- 原始图片所在区域 -->
<div id="mark"></div>
<!-- 扫描的圈圈 -->
<div id="float-box"></div>
<!-- 原图图片 -->
<img src="./2.jpg" width="400px" height="255px" />
</div>
<!-- 显示区域:显示放大图片区域 -->
<div id="big-box">
<!-- 放一样的图片 -->
<img src="./2.jpg" />
</div>
</div>
非常简单的布局效果 ,分为三个区域:原始图片的区域,扫描的圈圈,放大后显示的区域
css样式布局:
<style>
* {
margin: 0;
padding: 0
}
#demo {
/* display: block; */
width: 400px;
height: 255px;
margin: 50px;
position: relative;
border: 1px solid red;
}
#small-box {
position: relative;
z-index: 1;
}
#mark {
position: absolute;
display: block;
width: 400px;
height: 255px;
background-color: #fff;
filter: alpha(opacity=0);
opacity: 0;
z-index: 10;
}
#float-box {
width: 100px;
height: 100px;
position: absolute;
display: none;
background: #fff;
border: 1px solid #ccc;
filter: alpha(opacity=50);
/* filter:alpha(opacity=50)是IE专用的属性,因为它不支持opacity属性,为了保证浏览器的兼容性,建议使用时俩个都写。 */
opacity: 0.5;
/* 透明度 */
border-radius: 75%;
cursor: pointer;
}
#big-box {
display: none;
position: absolute;
top: 0;
left: 460px;
width: 600px;
height: 500px;
overflow: hidden;
border: 1px solid #ccc;
}
#big-box img {
position: absolute;
z-index: 5;
}
</style>
到这里大概的样式布局差不多就完成了 ,下面就是最最核心的部分了!
js 核心代码:
<script>
//页面加载完毕后执行
window.onload = function () {
// 获取所有被js操作元素队形
var objDemo = document.getElementById("demo");
var objSmallBox = document.getElementById("small-box");
var objMark = document.getElementById("mark");
var objFloatBox = document.getElementById("float-box");
var objBigBox = document.getElementById("big-box");
var objBigBoxImage = objBigBox.getElementsByTagName("img")[0];
// 给原始图片所在区域;绑定当鼠标移入时事件;
objMark.onmouseover = function () {
objFloatBox.style.display = "block"
objBigBox.style.display = "block"
}
// 给原始图片所在区域;绑定当鼠标移出时事件
objMark.onmouseout = function () {
objFloatBox.style.display = "none"
objBigBox.style.display = "none"
}
// 给原始图片所在区域;绑定鼠标移动事件
objMark.onmousemove = function (ev) {
console.log(ev)
var _event = ev || window.event; //兼容多个浏览器的event参数模式
// objDemo.offsetLeft = demo 左边距离body 的距离;= demo外边距
// objSmallBox.offsetLeft = 0 ;因为子元素脱离了父元素;所以small-box 左边距离 demo的距离 等于 0
// objFloatbox.offsetWidth/2 = (width + border)/2 =51
var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth /
2;
console.log(left + '=' + _event.clientX + '-' + objDemo.offsetLeft + '-' + objSmallBox.offsetLeft +
'-' + objFloatBox.offsetWidth /
2)
// offsetX/Y , 触发事件位置;X ,Y子元素距离元素左边的距离;顶部的距离 与父元素是否有位置属性没有关系。坐标轴原点在父元素左上角
var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight /
2;
//设置边界处理,防止移出小图片
if (left < 0) {
left = 0;
} else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) {
// 当扫描区域移动到;原始图片显示区域边上时候;就不让扫描区域移动
left = objMark.offsetWidth - objFloatBox.offsetWidth;
}
// 上下边境的处理
if (top < 0) {
top = 0;
} else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) {
// 当扫描区域移动到;原始图片显示区域边上时候;就不让扫描区域移动
top = objMark.offsetHeight - objFloatBox.offsetHeight;
}
objFloatBox.style.left = left + "px"; //oSmall.offsetLeft的值是相对什么而言
objFloatBox.style.top = top + "px";
// 对放大图片的位置移动处理
//求其比值
var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth);
var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight);
//方向相反,小图片鼠标移动方向与大图片相反,故而是负值
objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) +
"px";
objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) +
"px";
}
}
</script>
好了,代码到这里就结束了,js部分的代码相信大家看着都没有什么太大的问题,毕竟有那么多的注释啊哈哈(~ ̄▽ ̄)~