js实现简单放大镜特效

本文实例为大家分享了js实现简单放大镜特效的具体代码，供大家参考，具体内容如下

先来看看效果：

写放大镜之前我们先来了解一下定位：

通常子绝父相 （父元素相对定位，子元素绝对定位）

元素的定位方式：

1、static     静态定位，所有元素，不添加任何定位方式时的默认状态

2、relative   相对定位，不脱离文档流，可以相对于自身的原始位置，位移

3、fixed      固定定位，完全脱离文档流，相对于浏览器的空白区域来位移， 且不会因为浏览器的滚动而滚动

4、absolute   绝对定位，完全脱离文档流，相对于上N级元素来定位，  如果父级元素没有相对、绝对或固定定位方式时，绝对定位的元素会向更上层查找。

我们先定位盒子和放大盒子的位置然后隐藏放大盒子

.box {
     width: 450px;
     height: 450px;
     margin: 100px 0 0 100px;
     border: 1px solid red;
     posITion: relative;
 }
 /* 右边大盒子 */ .BigBox{
     width: 540px;
     height: 540px;
     position: absolute;
     top: 100px;
     left: 560px;
     border: 1px solid #ccc;
     overflow: hidden;
     display: none;
 }
 .bigBox img {
     position: absolute;
     left: 0;
     top: 0;
 }
 /* 覆盖物 */ .box .mask{
     width: 260px;
     height: 260px;
     background-color: yellow;
     /*调整透明度 */ opacity: .4;
     position: absolute;
     left: 0;
     top: 0;
     /* 默认消失 */ display: none;
 }
    

写js时我们要注意：

当页面加载完毕后，给box绑定鼠标进入和移出事件

script>
  window.onload = function (){
     VAR box = document.querySelector(".box");
     var mask = document.querySelector(".mask");
     var bigBox = document.querySelector(".bigBox");
     var bigImg = document.querySelector(".bigBox >
     img");
     console.LOG(bigImg);
  // 鼠标移入 box.onmouseover = function (){
     document.querySelector(".mask").style.display = "block";
     document.querySelector(".bigBox").style.display = "block";
 }
 // 移出 box.onmouseout = function (){
     document.querySelector(".mask").style.display = "none";
     document.querySelector(".bigBox").style.display = "none";
 }
 // 让覆盖物跟随鼠标移动 box.onmouSEMove = function (){
     // 因为box有100像素的外边距，我们需要减掉，否则会错位 var left = event.pageX - 100 - 130;
     var top = event.pageY - 100 - 130;
     // 覆盖物不能超出box范围，就需要判坐标的取值范围了 // 得到覆盖物在box中可移动的最大距离 var maskMax = this.offsetWidth - mask.offsetWidth;
 // 判断left if(left = 0){
     left = 0;
 }
    else if(left >
= maskMax){
     left = maskMax;
 }
 // top if(top = 0){
     top = 0;
 }
    else if(top >
= maskMax){
     top = maskMax;
 }
     // 将设置好的left，top值设置给样式 mask.style.left = left + "px";
     mask.style.top = top + "px";
     mask.style.cursor = "move";
    

注意：

①根据移动的比例，设置大图的移动坐标
②大图的移动坐标 = 覆盖物的偏移量 * 大图片的最大可移动距离 /  覆盖物的最大可移动距离
③ ? = 偏移量 *( 图片的宽度 - bigBox的宽度 ) / maskMax

// 大图在大盒子中的最大位移距离var bigImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
    // 大图片的left值var bigImgX = mask.offsetLeft * bigImgMax / maskMax;
    // 大图的top值 var bigImgY = mask.offsetTop * bigImgMax / maskMax;
     // 覆盖物与大图片的移动方向是反的，所以这里要给负值 bigImg.style.left = -bigImgX + "px";
     bigImg.style.top = -bigImgY + "px";
 }
 }
    

mark为放大镜（黄色部分）

div class="box">
     img src="../img/small.jpg" alt="">
    div class="mask">
    /div>
    div class="bigBox">
     img src="../img/big.jpg" alt="">
    /div>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• javaScript实现放大镜特效
• JavaScript仿京东放大镜特效
• 基于javascript实现放大镜特效
• JS实现电商商品展示放大镜特效
• 原生JS实现的放大镜特效示例【测试可用】
• js实现放大镜特效
• 原生js简单实现放大镜特效
• Javascript实例项目放大镜特效的实现流程

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！