快捷導(dǎo)航

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

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

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

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

我們不廢話，直接上例子。首先利用dom的垂直分層實(shí)現(xiàn)圖片的點(diǎn)擊放大和縮?。ㄊ謾C(jī)上使用的效果較好），在圖片放大的時(shí)候同時(shí)禁止頁(yè)面的滑動(dòng)，如果在web端的話可以不禁止屏幕的滾動(dòng)（因?yàn)閳D片放大是將圖片的寬度變成100%，在web上長(zhǎng)度可能會(huì)超出屏幕的高度）。

來(lái)看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>

咱們?cè)賮?lái)看下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");//下層不可滑動(dòng)
  $(".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值，這個(gè)案例非常簡(jiǎn)單，還可以通過(guò)修改css來(lái)展示不同的樣式的圖片，大家有時(shí)間可以研究下，今天有點(diǎn)懶，直接貼的代碼。

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

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

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

您可能感興趣的文章: