快捷導(dǎo)航

jQuery實現(xiàn)的圖片點擊放大縮小功能案例

更新時間：2020年01月02日 09:34:23 作者：luyaran

這篇文章主要介紹了jQuery實現(xiàn)的圖片點擊放大縮小功能,結(jié)合具體案例形式分析了jquery基于事件響應(yīng)與頁面屬性動態(tài)變換實現(xiàn)的圖片放大縮小功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

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

我們不廢話，直接上例子。首先利用dom的垂直分層實現(xiàn)圖片的點擊放大和縮?。ㄊ謾C上使用的效果較好），在圖片放大的時候同時禁止頁面的滑動，如果在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" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>';
  $(document.body).append(opacityBottom);
  toBigImg();//變大函數(shù)
});
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來展示不同的樣式的圖片，大家有時間可以研究下，今天有點懶，直接貼的代碼。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述代碼運行效果。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對大家jQuery程序設(shè)計有所幫助。

您可能感興趣的文章: