JS——点击放大图片或鼠标滚动方法图片（大小图对应选择）

最新推荐文章于 2024-11-04 16:49:48 发布

原创最新推荐文章于 2024-11-04 16:49:48 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS 放大图片

js 专栏收录该内容

137 篇文章

订阅专栏

本文介绍了一个简单的网页应用案例，该应用通过HTML、CSS和JavaScript实现了图片的缩放和平滑轮播功能。文章详细展示了如何使用JavaScript来控制图片的缩放比例，并通过监听滚轮事件实现自动放大缩小效果；同时，还介绍了如何设置图片点击切换功能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/3.css">
  </head>
  <body>
    <div class="head">
        <div class="head_a" align="center">
          <a href="#" onclick="doImgOp(1)">-</a>
          <a href="#" onclick="doImgOp(2)">Auto</a>
          <a href="#" onclick="doImgOp(3)">+</a>
        </div>
    </div>
    <div class="sec1">
      <img src="img/timg.jpg" alt="" id="sec1_img" class="sec1_img">
    </div>
    <div class="sec2">
      <img src="img/1.jpg" alt="" id="sec2_img1" onclick="getImg(1)">
      <img src="img/2.jpg" alt="" id="sec2_img2" onclick="getImg(2)">
      <img src="img/3.jpg" alt="" id="sec2_img3" onclick="getImg(3)">
    </div>
    <div class="sec3" align="center">
      <a href="#">上一页</a>
      <a href="#">下一页</a>
    </div>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
      //闭包
      function ImgOp() {
        var mul = 1;
        console.log("large");
        return function(num){
          if(num == 1){
            mul /= 1.2;
          }else if(num == 2){
            mul = 1;
          }else if(num == 3){
            mul *= 1.2;
          }else if(num == 4){
            mul *= 1.1;
          }else if(num == 5){
            mul /= 1.1;
          }
          getId("sec1_img").style.transform = ("scale("+mul+")");
        }
      }

    doImgOp = ImgOp();
    console.log(doImgOp);

    function getImg(id) {
      var path = getId("sec2_img"+id).src;
      console.log(path);
      getId("sec1_img").src = path;
    }

    //下面代码参考：https://www.cnblogs.com/Wu-W-Sen/archive/2015/05/28/4535834.html
    var scrollFunc = function (e) {
     e = e || window.event;
     if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件
         if (e.wheelDelta > 0) { //当滑轮向上滚动时
            // alert("滑轮向上滚动");
            doImgOp(4);
         }
         if (e.wheelDelta < 0) { //当滑轮向下滚动时
            // alert("滑轮向下滚动");
           doImgOp(5);
         }
     } else if (e.detail) {  //Firefox滑轮事件
         if (e.detail> 0) { //当滑轮向上滚动时
             //alert("滑轮向上滚动");
             doImgOp(4);
         }
         if (e.detail< 0) { //当滑轮向下滚动时
            // alert("滑轮向下滚动");
            doImgOp(5);
         }
     }
 }
 //给页面绑定滑轮滚动事件
 if (document.addEventListener) {//firefox
     document.addEventListener('DOMMouseScroll', scrollFunc, false);
 }
 //滚动滑轮触发scrollFunc方法  //ie 谷歌
 window.onmousewheel = document.onmousewheel = scrollFunc;
    </script>
  </body>
</html>