js实现简单放大镜特效

作者:一个21岁的老同志 时间:2024-04-30 08:51:48 

本文实例为大家分享了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>

来源:https://blog.csdn.net/weixin_42232622/article/details/112485014

标签:js,放大镜
0
投稿

猜你喜欢

  • selenium+python实现文件上传操作的方法实例

    2022-05-06 13:21:49
  • 使用Python实现NBA球员数据查询小程序功能

    2021-06-27 17:15:48
  • SQL Server中通过扩展存储过程实现数据库的远程备份与恢复

    2024-01-17 14:38:41
  • 教你怎么用python连接sql server

    2023-01-31 22:27:33
  • Python-接口开发入门解析

    2022-05-24 09:19:43
  • 关于Go 空结构体的 3 种使用场景

    2024-05-22 17:45:21
  • python3 pathlib库Path类方法总结

    2022-06-10 18:38:11
  • 在Python中使用NLTK库实现对词干的提取的教程

    2022-11-04 15:13:53
  • CentOS下使用yum安装python-pip失败的完美解决方法

    2023-07-09 12:23:01
  • python生成式的send()方法(详解)

    2022-09-02 23:50:56
  • Django中提示消息messages的设置方式

    2021-08-14 20:40:51
  • mysql中的load命令使用方法

    2024-01-21 05:39:23
  • python基于Node2Vec实现节点分类及其可视化示例详解

    2022-04-16 06:49:33
  • Python 安装第三方库 pip install 安装慢安装不上的解决办法

    2023-02-23 13:43:45
  • 微信小程序如何调用图片接口API并居中显示

    2023-08-09 15:05:30
  • python进阶教程之文本文件的读取和写入

    2023-08-03 03:27:47
  • 详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案

    2024-04-29 13:25:38
  • JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同

    2024-04-19 10:02:23
  • Facebook:产品设计评价体系解密

    2011-05-24 17:13:00
  • Mysql错误1366 - Incorrect integer value解决方法

    2024-01-13 03:21:35
  • asp之家 网络编程 m.aspxhome.com