起个网名好难 发表于 2025-2-12 21:55

图片无级缩放

本帖最后由 起个网名好难 于 2025-2-12 22:34 编辑 <br /><br /><meta name="referrer" content="never" >
<style>
.slider-box {
    margin: 50px;
    width: 300px;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    position: relative;
}

.slider {
    position: absolute;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: blue;
    top: -2px;
    left: 0;
        point-events:auto;
}
</style>
<div id="sliderBox" class="slider-box">
<span class="slider" id="slider"></span>
</div>
<img id="pic" width="400"src="https://mmbiz.qpic.cn/mmbiz_jpg/ZVMPNAD6G2QKxTJH3qwUibO5Y58kYkmJANmxs1FOrzlDmv1pG1NzsV479gdLaSZNpm0kvuyACj7iaicfVh9qDj31w/640">
<script>
(function() {
    const sliderBox = document.getElementById('sliderBox');
    const span = document.getElementById('slider');
    const boxWidth = sliderBox.offsetWidth;
        const screenWidth = window.screen.width;
    // set a boolean that true is drag slider and false is other event;
    let flag = false, sFlag = false;
       
        span.style.left = pic.width * boxWidth /screenWidth / 0.6 + 'px' ;
       
    // mousedown event of slider
    function onMouseDown(event) {
      flag = true;
    }
    // mousemove event of document
    function onMouseMove(event) {
      if (flag & sFlag) {
      // get mouse offsetX for box
      const offsetX = event.x - sliderBox.offsetLeft;
      // get left offset
      let left = 0;
      if (offsetX > boxWidth) {
          left = boxWidth;
      } else if (offsetX >= 0) {
          left = offsetX;
      } else {
          left = 0;
      }
      // set left position of slider
      span.style.left = left + 'px';
      pic.width = left / boxWidth * screenWidth * 0.6;
      }
    }
    // mouseup event of document
    function onMouseUp(event) {
      flag = false;
    }
    // add listener when page or component loaded
    function addListener() {
      span.addEventListener('mousedown', onMouseDown);
      sliderBox.addEventListener('mouseover', () => {sFlag = true;});
      sliderBox.addEventListener('mouseout', () => {sFlag = false;});
      sliderBox.addEventListener('mousemove', onMouseMove);
      sliderBox.addEventListener('mouseup', onMouseUp);
    }
    // remove listener when page or component destroy
    function removeListener() {
      span.removeEventListener('mousedown', onMouseDown);
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    }
    addListener();
})()
</script>

红影 发表于 2025-2-12 23:05

这个好玩，不用设置变大变小，拉动滚动条，可以所以放大和缩小了{:4_199:}

红影 发表于 2025-2-12 23:06

谢谢难难带来的好帖{:4_187:}

起个网名好难 发表于 2025-2-13 06:20

红影 发表于 2025-2-12 23:06
谢谢难难带来的好帖

谢谢支持鼓励， 这就是个代码练习。

早上好！

樵歌 发表于 2025-2-13 08:58

这个太牛了，太好用了，有时AI上找的图图，虽然合适，但太小了，以后就扩这个来放大。{:4_190:}

起个网名好难 发表于 2025-2-13 09:19

樵歌 发表于 2025-2-13 08:58
这个太牛了，太好用了，有时AI上找的图图，虽然合适，但太小了，以后就扩这个来放大。

拉大了会不会不清晰啊

小文 发表于 2025-2-13 10:38

好用的工具，喜欢

红影 发表于 2025-2-13 10:47

起个网名好难 发表于 2025-2-13 06:20
谢谢支持鼓励， 这就是个代码练习。

早上好！

非常有用呢{:4_187:}

起个网名好难 发表于 2025-2-13 11:48

红影 发表于 2025-2-13 10:47
非常有用呢

真想不出可以用在什么地方。

起个网名好难 发表于 2025-2-13 11:48

小文 发表于 2025-2-13 10:38
好用的工具，喜欢

谢谢支持！

就是个代码练习

小辣椒 发表于 2025-2-13 15:58

难难你的代码技术也是强大的，必须赞一记{:4_178:}

樵歌 发表于 2025-2-13 17:19

起个网名好难 发表于 2025-2-13 09:19
拉大了会不会不清晰啊

一模一样！！{:4_176:}

起个网名好难 发表于 2025-2-13 18:44

小辣椒 发表于 2025-2-13 15:58
难难你的代码技术也是强大的，必须赞一记

就是做个练习，做不出帖子就找个事干{:4_203:}

起个网名好难 发表于 2025-2-13 18:51

樵歌 发表于 2025-2-13 17:19
一模一样！！

大尺寸的图片缩小些还行。

红影 发表于 2025-2-13 21:52

起个网名好难 发表于 2025-2-13 11:48
真想不出可以用在什么地方。

可以在帖子里鼠标触碰就变大啊，活着反复自己放大缩小{:4_173:}

起个网名好难 发表于 2025-2-13 21:56

小文 发表于 2025-2-13 10:38
好用的工具，喜欢

谢谢支持鼓励！

起个网名好难 发表于 2025-2-13 21:58

红影 发表于 2025-2-13 21:52
可以在帖子里鼠标触碰就变大啊，活着反复自己放大缩小

本来的目的是练习鼠标拖动滚动条。

红影 发表于 2025-2-13 22:34

起个网名好难 发表于 2025-2-13 21:58
本来的目的是练习鼠标拖动滚动条。

哦，那目的也达到了呢{:4_187:}

梦江南 发表于 2025-2-14 08:22

拉动小圆点就可以缩放。这个好玩。{:4_199:}

起个网名好难 发表于 2025-2-14 09:12

梦江南 发表于 2025-2-14 08:22
拉动小圆点就可以缩放。这个好玩。

也就是能玩玩没什么用处
页: [1] 2
查看完整版本: 图片无级缩放