JavaScript实现淘宝网图片的局部放大功能
更新时间：2022年05月16日 15:37:20 作者：长得丑就要多读书
这篇文章主要为大家详细介绍了JavaScript实现淘宝网图片的局部放大功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>代码运行效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JavaScript操作压缩图片原理不难，已有成熟 API，然而在实际输出压缩后结果却总有意外，有些图片竟会越压缩越大，加之终端（手机）类型众多，有些手机压缩图片甚至变黑。本文将一步一步解决此类问题2021-05-05
表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程，感兴趣的朋友一起学习吧2016-04-04![[js高手之路]HTML标签解释成DOM节点的实现方法](//img.jbzj.com/images/xgimg/bcimg2.png)
下面小编就为大家带来一篇[js高手之路]HTML标签解释成DOM节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
通常，我们在编写一个新的JavaScript代码过程中经常会发生错误，可能是语法错误，可能是逻辑错误，如果没有一个调试工具帮助我们的话，相信你怕是头都要炸了。下面这篇文章主要给大家总结介绍了关于利用Console来Debug的10个高级技巧，需要的朋友可以参考下。2018-03-03
整理Javascript数组学习笔记,之前一系列的文章是跟我学习Javascript，本文就是进一步学习javascript数组，希望大家继续关注2015-11-11
这篇文章主要介绍了JavaScript记录光标在编辑器中位置的实现方法,涉及JavaScript鼠标事件结合页面元素的操作技巧,需要的朋友可以参考下2016-04-04
这篇文章主要为大家详细介绍了js canvas实现简单的图像扩散效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
JavaScript监测ActiveX控件是否已经安装过的代码
这是通用的方法，只需要把唯一的Activex的clsid和任意一个属性或方法名传进来就可以判断了。（找了两个小时才找到 -_-!）2008-09-09
JavaScrip实现PHP print_r的数功能（三种方法）
PHP print_r的函数很好用，可以用来打印数组、对象等的结构与数据，可惜JavaScript并没有原生提供类似的函数。不过我们可以试着自己来实现这个函数，下面提供一些方法与思路2013-11-11
这篇文章主要给大家介绍了关于JavaScript判断文件是否存在的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
![[js高手之路]HTML标签解释成DOM节点的实现方法](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论