JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法-創(chuàng)新互聯(lián)

這篇文章主要介紹JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)專注于秀嶼企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,商城系統(tǒng)網(wǎng)站開發(fā)。秀嶼網(wǎng)站建設(shè)公司,為秀嶼等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

實(shí)現(xiàn)效果如下：

JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法

實(shí)現(xiàn)代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{width:400px;height:400px;overflow:hidden;position:relative;border:1px solid #000;}
    div img{position:absolute;height:100%;width:auto;cursor:move;}
  </style>
</head>
<body>
<div id="div" onmousewheel="return bbimg(this)"><img id="img" border="0" src="img/zs.jpg" /></div>
<script language="javascript">
  var params = {
    zoomVal:1,
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
  };
  //圖片縮放
  function bbimg(o){
    var o=o.getElementsByTagName("img")[0];
    params.zoomVal+=event.wheelDelta/1200;
    if (params.zoomVal >= 0.2) {
      o.style.transform="scale("+params.zoomVal+")";
    } else {
      params.zoomVal=0.2;
      o.style.transform="scale("+params.zoomVal+")";
      return false;
    }
  }
  //獲取相關(guān)CSS屬性
  var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
  };
  //拖拽的實(shí)現(xiàn)
  var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
      params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
      params.top = getCss(target, "top");
    }
    //o是移動(dòng)對(duì)象
    bar.onmousedown = function(event){
      params.flag = true;
      if(!event){
        event = window.event;
        //防止IE文字選中
        bar.onselectstart = function(){
          return false;
        }
      }
      var e = event;
      params.currentX = e.clientX;
      params.currentY = e.clientY;
    };
    document.onmouseup = function(){
      params.flag = false;
      if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
      }
      if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
      }
    };
    document.onmousemove = function(event){
      var e = event ? event: window.event;
      if(params.flag){
        var nowX = e.clientX, nowY = e.clientY;
        var disX = nowX - params.currentX, disY = nowY - params.currentY;
        target.style.left = parseInt(params.left) + disX+ "px";
        target.style.top = parseInt(params.top) + disY+ "px";
        if (typeof callback == "function") {
          callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
        }
        if (event.preventDefault) {
          event.preventDefault();
        }
        return false;
      }
    }
  };
  startDrag(document.getElementById("img"),document.getElementById("img"))
</script>
</body>
</html>

以上是“JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁題目：JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://jinyejixie.com/article8/jesop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站營(yíng)銷、網(wǎng)站策劃、Google、企業(yè)網(wǎng)站制作、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

JavaScript實(shí)現(xiàn)圖片的放大縮小及拖拽功能的方法-創(chuàng)新互聯(lián)