JavaScript实现淘宝网图片的局部放大功能
作者：长得丑就要多读书 时间：2023-08-25 05:44:56
本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码，供大家参考，具体内容如下
要实现的效果如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
position: relative;
width: 300px;
height: 200px;
background: url("./JS封面.jpg");
/*设置背景图尺寸大小*/
background-size: 300px 200px;
}
.slider{
position: absolute;
width: 100px;
height: 100px;
background: black;
/*设置透明度0~1，0是全透明。*/
opacity: 0.3;
}
.small{
position: absolute;
width: 100px;
height:100px;
background: url('./JS封面.jpg');
top: 0px;
right: -300px;
background-size: 300px 200px;
/*让元素放大，scale(3)指宽高同时放大3倍。*/
transform: scale(3);
}
</style>
</head>
<body>
<div class="box">
<div class="slider"></div>
<div class="small"></div>
</div>
</body>
</html>
<script type="text/javascript">
var slider = document.querySelector('.slider');
var small = document.querySelector('.small');
//鼠标按下
slider.onmousedown = function(event){
var startX = event.offsetX;
var startY = event.offsetY;
//鼠标移动
document.onmousemove = function (event1) {
var l = event1.clientX-startX;
var t = event1.clientY-startY;
//将小滑块限制在大滑块内
if(l <= 0) l = 0;
if(l >= 200) l = 200;
if(t <= 0) t = 0;
if(t >= 100) t = 100;
slider.style.left = l+"px";
slider.style.top = t+"px";
//修改小图的背景图定位
small.style.backgroundPosition="-"+l+"px -"+t+"px";
}
}
//鼠标抬起时，将鼠标移动事件移除
document.onmouseup = function () {
document.onmousemove = null;
}
</script>
代码运行效果：
来源：https://blog.csdn.net/qq_40523659/article/details/121245657
标签：js,淘宝网,放大
0
投稿猜你喜欢
python break和continue用法对比
2021-11-03 14:36:20
python实现扫雷小游戏
2023-02-15 11:58:58
PL/SQL Dev连接Oracle弹出空白提示框的解决方法分享
2024-01-28 03:19:05
如何让Firefox2和Firefox3在Windows下共存并同时运行？
2008-06-01 15:50:00
教你如何开发Vite3插件构建Electron开发环境
2024-04-28 09:22:54
SQL2005 自动备份的脚本
2024-01-23 20:34:27
Python构建XML树结构的方法示例
2023-06-22 09:35:07
apache集成php7.3.5的详细步骤
2023-08-20 16:31:05
Python面向对象之继承原理与用法案例分析
2021-06-28 02:07:53
深入解析Python设计模式编程中建造者模式的使用
2021-03-10 15:32:18
该行已经属于另一个表 的解决方法
2024-01-26 05:15:32
立足于传统行业设计
2008-07-26 12:36:00
一文带你重温一下Python的对象模型
2022-09-15 15:52:52
在pycharm上mongodb配置及可视化设置方法
2022-12-04 07:05:31
JS获取网页图片name属性的方法
2024-04-28 09:46:19
Python统计可散列的对象之容器Counter详解
2023-09-23 18:30:50
RabbitMq如何做到消息的可靠性投递
2024-04-23 09:36:57
降低锁竞争 减少MySQL用户等待时间
2011-03-11 18:58:00
asp 判断上传文件中是否存在危险代码
2011-03-17 11:19:00
Golang中的错误处理深入分析
2024-02-18 20:59:46