JavaScript實現(xiàn)淘寶網(wǎng)圖片的局部放大功能

更新時間：2022年05月16日 15:37:20 作者：長得丑就要多讀書

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)淘寶網(wǎng)圖片的局部放大功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)淘寶網(wǎng)圖片的局部放大的具體代碼，供大家參考，具體內容如下

要實現(xiàn)的效果如下：

<!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>

代碼運行效果：