JavaScript实现简易放大镜最全代码解析(ES5)

作者：飒尔时间：2024-04-30 08:52:11　

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

完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5放大镜</title>
<style>
.box {
width: 170px;
height: 180px;
margin: 100px 200px;
border: 1px solid #ccc;
position: relative;
}
.small {
position: relative;
}
.big {
width: 300px;
height: 320px;
position: absolute;
top: 30px;
left: 220px;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.mask {
width: 100px;
height: 100px;
background: rgba(255,255,0,0.3);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.big img{
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="small">
<img src="img/shirt_1.jpg" alt="picture"/>
<div class="mask"></div>
</div>
<div class="big">
<img src="img/shirt_1_big.jpg" alt="picture"/>
</div>
</div>
</body>
<script>
var box = document.getElementById('box');
var small = box.children[0];//放小图的盒子
var big = box.children[1];//放大图的盒子
var mask = small.children[1];//半透明鼠标移动跟随盒子
var bigImage = big.children[0];//大图片
small.onmouseover = function(event){
big.style.display = 'block';
mask.style.display = 'block';
}
small.onmouseout = function(){
big.style.display = 'none';
mask.style.display = 'none';
}
//移动事件，注意mask的定位相对的是samll
small.onmousemove = function(event){
var event = event || window.event;//事件对象
// console.log(this.offsetLeft);//0,注意offsetLeft返回距离是一个带有定位的父级的左侧距离
var x = event.clientX-this.offsetParent.offsetLeft-mask.offsetWidth/2;//此处不能用small的offsetLeft,用obj的offsetLeft
var y = event.clientY-this.offsetParent.offsetTop-mask.offsetHeight/2;
//限制半透明盒子出界
if(x < 0){
x = 0;
}else if(x > small.offsetWidth - mask.offsetWidth){
x = small.offsetWidth - mask.offsetWidth;
}
if( y < 0){
y = 0;
}else if( y > small.offsetHeight - mask.offsetHeight){
y = small.offsetHeight - mask.offsetHeight;
}
mask.style.left = x + "px";
mask.style.top = y +"px";
//大图片放大
bigImage.style.left = -x*big.offsetWidth/small.offsetWidth + 'px';
bigImage.style.top = -y*big.offsetHeight/small.offsetHeight + 'px';
//big.offsetWidth/small.offsetWidth是放大倍数
//因为小图鼠标下移，大图上移，故用负数
}
</script>
</html>

图片：

来源：https://blog.csdn.net/CSErtuh/article/details/120186252

标签：js,放大镜

投稿

JavaScript实现简易放大镜最全代码解析(ES5)

猜你喜欢

phpmyadmin 4+ 访问慢的解决方法

浅谈python中的面向对象和类的基本语法

vue-cli与webpack处理静态资源的方法及webpack打包的坑

打造设计你自己的字体

详解django使用include无法跳转的解决方法

Python操作mysql数据库实现增删查改功能的方法

基于Python实现的ID3决策树功能示例

通过Python中的CGI接口讲解什么是WSGI

mysql 8.0.12 安装配置方法并修改密码

python实现双人五子棋（终端版）

python+mysql实现简单的web程序

解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思

JavaScript入门教程(4) js浏览器对象

IE和Firefox的js兼容性整理

Python爬虫基础之简单说一下scrapy的框架结构

SpringBoot集成Flyway进行数据库版本迁移管理的步骤

Golang中的错误处理的示例详解

Python中Turtle库改变画笔(海龟)方向的两种方法总结

python面向对象实现名片管理系统文件版

MySQL之Explain详解