jQuery如何實現圖片點擊放大縮小功能

這篇文章將為大家詳細講解有關jQuery如何實現圖片點擊放大縮小功能，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

本文實例講述了jQuery實現的圖片點擊放大縮小功能。分享給大家供大家參考，具體如下：

我們不廢話，直接上例子。首先利用dom的垂直分層實現圖片的點擊放大和縮小（手機上使用的效果較好），在圖片放大的時候同時禁止頁面的滑動，如果在web端的話可以不禁止屏幕的滾動（因為圖片放大是將圖片的寬度變成100%，在web上長度可能會超出屏幕 的高度）。

來看css部分代碼：

<style>
  /*全屏顯示大圖*/
  .opacityBottom{
    width: 100%;
    height: 100%;
    position: fixed;
    background:rgba(0,0,0,0.8);
    z-index:1000;
    top: 0;
    left: 0
  }
  .none-scroll{
    overflow: hidden;
    height: 80%;
  }
  .bigImg{
    width:80%;
    height: 80%;
    left:10%;
    top:10%;
    position:fixed;
    z-index: 10001;
  }
</style>

咱們再來看下js部分的代碼：

$(".image_click").click(function () {
  var imgsrc = $(this).attr("src");
  var opacityBottom = '<div id="opacityBottom" ><img class="bigImg" src="'+ imgsrc +'" ></div>';
  $(document.body).append(opacityBottom);
  toBigImg();//變大函數
});
function toBigImg(){
  $("#opacityBottom").addClass("opacityBottom");
  $("#opacityBottom").show();
  $("html,body").addClass("none-scroll");//下層不可滑動
  $(".bigImg").addClass("bigImg");
  /*隱藏*/
  $("#opacityBottom").bind("click",clickToSmallImg);
  $(".bigImg").bind("click",clickToSmallImg);
  var imgHeight = $(".bigImg").prop("height");
  if(imgHeight < h){
    $(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});
  }else{
    $(".bigImg").css({"top":'0px'});
  }
  function clickToSmallImg() {
    $("html,body").removeClass("none-scroll");
    $("#opacityBottom").remove();
  }
};

image_click是綁定圖片的class值，這個案例非常簡單，還可以通過修改css來展示不同的樣式的圖片，大家有時間可以研究下，今天有點懶，直接貼的代碼。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

關于“jQuery如何實現圖片點擊放大縮小功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。