JavaScript实现淘宝网图片的局部放大功能
作者:长得丑就要多读书 发布时间:2023-08-25 05:44:56
标签:js,淘宝网,放大
本文实例为大家分享了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
0
投稿
猜你喜欢
- 在极坐标中,圆的表示方式为:x=x0+rcosθy=y0+rsinθ圆心为(x0,y0),r为半径,θ为旋转度数,值范围为0-359如果给定
- 在NumPy中,矩阵是 ndarray 的子类,与数学概念中的矩阵一样,NumPy中的矩阵也是二维的,可以使用 mat 、 matrix 以
- 计算年、月、日需要安装组件包pip install python-dateutil当前日期时间import datetimeprint da
- 本文实例为大家分享了pytorch实现线性回归以及多元回归的具体代码,供大家参考,具体内容如下最近在学习pytorch,现在把学习的代码放在
- 一、数组的创建方式一var a = new Array(); a[0]="wo"
- 在C#或者Java里面我们都知道,一个Class是要包含成员变量和方法的,对于GO语言的Struct也一样,我们也可以给Struct定义一系
- 人脸识别正在成为软件开发中的一种趋势。它有助于识别人脸并使应用程序更加健壮。在本教程中,我们将使用python和face_recogniti
- MySQL 复制详解及简单实例 主从复制技术在MySQL中被广泛使用,主要用于同步一台服务器上的数据至多台从服务器,可以用于实现负
- JDBC,Java Database Connectivity,即 Java 数据库连接。实际上 JDBC 是 Java 中的一套和数据库进
- asp程序运行速度试验实验:1。作相同的分支条件判断:IF 比 SELECT慢。用以下程序测试:
- 为了建立冗余较小、结构合理的数据库,设计数据库时必须遵循一定的规则。在关系型数据库中这种规则就称为范式。范式是符合某一种设计要求的总结。要想
- 本文实例讲述了Python使用pickle模块储存对象操作。分享给大家供大家参考,具体如下:众所周知,当我们需要储存数据的时候,就需要用到重
- 像素误差看自己设计好上线的网站,偶尔会发觉像素行间出现了弹性空间,总在不经意间蹦出一定的差距。有些页面很难发现,比如活动类页面,这类页面多呈
- 本文实例讲述了Python实现批量修改图片格式和大小的方法。分享给大家供大家参考,具体如下:第一种方法用到opencv库import osi
- 利用Chrome或Firefox保存的Har文件http/https请求,可用于遍历字典提交From表单.少说废话直接上代码Github地址
- 第一步——安装MySQL 到http://dev.mysql.com/downloads/ 下载这个服务器、MySQL GUI工具和MySQ
- defaultdict底层代码:在字典中查找某个值时,若key不存在时则会返回一个KeyError错误而不是一个默认值,这时候可以使用def
- 一、torch.rand():构造均匀分布张量的方法torch.rand是用于生成均匀随机分布张量的函数,从区间[0,1)的均匀分布中随机抽
- 之前一直用python自带的IDLE写python程序,后来发现有一些限制啥的,于是下载了pycharm作为IDE去处理python新建项目
- 1.因为oracle 10g暂时没有与win7兼容的版本,我们可以通过对安装软件中某些文件的修改达到安装的目地。 a)打开“\ORACLE1