JS实现图片缩放功能

本文介绍了一种使用JavaScript实现的图片缩放功能,包括通过鼠标滚轮和点击按钮两种方式来调整图片大小的方法。该功能利用了style.zoom属性来改变图片的显示比例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     在上网时经常会看到有图片缩放的功能, 于是今天自己也动手写了一个, 以下是源代码: 

        <html>

<head>

<title>图片自动缩放</title>

</head>

<body>
   <script language="javascript">
   <!--
     function  bimg(pic){
             // 获取对象缩放比例, 并转化成十进制整数
        var zoom = parseInt(pic.style.zoom,10) || 100;
            //滚轮移动量上移+120, 下移-120
        zoom+=event.wheelDelta/12;
          if(zoom>0)
          pic.style.zoom = zoom+'%';  //重新设置比例
          return false;
     }
    
     function limg(){
      var zoom=parseInt(pic.style.zoom, 10)||100;
     zoom +=zoom/12;
     if(zoom>0){
        pic.style.zoom=zoom+'%'; //重新设置比例
        return false;
     }
     }
    
     function simg(){
     var zoom=parseInt(pic.style.zoom, 10)||100;
     zoom -=zoom/12;
     if(zoom>0){
        pic.style.zoom=zoom+'%'; //重新设置比例
        return false;
     }
     }
     //-->
   </script>
   <img src="收藏1.jpg" border="0" onmousewheel="return bimg(this)">
   <img src="收藏1.jpg" border="0" id="pic"><a href="#" onclick="return limg();">放大</a>&nbsp;&nbsp;<a href="#" onclick="return simg();">缩小</a>
  

</body>

</html>

   ————说明: 上述代码中用到了三个函数, 第一个函数是用滚轮去控制缩放的, 第二个与第三个则是通过点击链接控制的。

     1、 parseInt()方法用于将一个字符串转换为整型数字, 其中parseInt(xxx,10),代表把字符串转化成整数,10代表十进制,同理8,16等分别代表八进制和十六进制

    2、 style.zoom属性主要是用来显示元素的放大比例

    3、 event.wheelData属性为onmousewheel事件返回的一个表示鼠标滑轮滚动方向的整数, 返回值一般式120或120,正值表示滚轮向上滚动,负值表示向下滚动。

     4、 onmousewheel事件表示当鼠标中间滚轮滚动时获取通知。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值