国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圖片放大功能如何做?jquery實(shí)現(xiàn)

objc94 / 3434人閱讀

摘要:花了很長時間擼了個網(wǎng)站,觀點(diǎn)其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片自我感覺效果還不錯,現(xiàn)在分享開來給大家看看,哪里不好還請多多指教,謝謝大家。

花了很長時間擼了個網(wǎng)站,觀點(diǎn),其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片:

自我感覺效果還不錯,現(xiàn)在分享開來給大家看看,哪里不好還請多多指教,謝謝大家。

css 部分:

.zoomify-dialog-pic {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     background: rgba(0,0,0,0.35);
     z-index: 99999;
     display: none;
}

.zoomify-dialog-pic .dialog-body {
     
      position:absolute;
      width: 100%;
      max-width: 250px;
      max-height: 300px;
      margin-top:-150px;/*div 高度的一半*/
      margin-left:-125px;/*div 寬度的一半*/
      top:50%;
      left:50%;
      padding:10px;
      border-radius:5px;
      background: white;
}
     
.zoomify-dialog-pic .dialog-body img {
     width: 100%;
}

.magnifier {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out;
  cursor:url("icon/magnifier.ico"),auto;
}

.un-magnifier {
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
  cursor:url("icon/unmagnifier.ico"),auto;
}
說明下,上面 css 的 cursor:url 請放到自己的圖片服務(wù)器上,萬惡的 IE 不支持本地

js 部分:

var ROOT = $("input[name="globalPath"]").val();

function zoomOut(orginImg,times){
    
    var obj=$(".zoomify-dialog-pic .dialog-body");
    var img=$(".zoomify-dialog-pic .dialog-body img");

    var imgW=$(orginImg).width();
    var imgH=$(orginImg).height();

    var newH=imgH*times;
    var newW=imgW*times;
    
    var bodyH=$("body").height();
    var bodyW=$("body").width();
    
    if(newW>bodyW){
        newW=bodyW-40;
        obj.css("padding","5px");
    }
    
    if(newH>bodyH){
        newH=bodyH-40;
        obj.css("padding","5px");
    }
    
    //圖片新高度、寬度
    img.css("width",newW+"px");
    img.css("height",newH+"px");
    
    //容器新高度、寬度,因?yàn)閳D片放大了,所以容器也必須放大
    //不要用 padding 屬性,ie 下不支持
    var padding=parseInt(obj.css("padding-top"));
    
    cWith=newW+padding*2;
    cHeight=newH+padding*2;
    
    obj.css("max-width",cWith+"px");
    obj.css("max-height",cHeight+"px");
    
    obj.css("margin-left",(cWith/2)*-1+"px");
    obj.css("margin-top",(cHeight/2)*-1+"px");
}

function insertPic(url){
    html="
"+ "
"+ ""+ "
"+ "
"; return html; } $(".page-content-l").on("click","p img",function(){ var url=$(this).attr("src"); html=insertPic(url); $("body").append(html); zoomOut(this,1.2); $(".zoomify-dialog-pic").show(); }); $("html").on("click",".zoomify-dialog-pic",function(){ $(this).remove(); }); $(".page-content-l").on("mouseover mouseout","p img",function(event){ if(event.type == "mouseover"){ $(this).addClass("magnifier"); }else if(event.type == "mouseout"){ $(this).removeClass("magnifier"); } });

代碼是毫無保留公開,絕對可以使用的,喜歡給我點(diǎn)個贊,也可以加我的 qq 群交流:284205104,謝謝您的閱讀。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92193.html

相關(guān)文章

  • 圖片放大功能如何?jquery實(shí)現(xiàn)

    摘要:花了很長時間擼了個網(wǎng)站,觀點(diǎn)其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片自我感覺效果還不錯,現(xiàn)在分享開來給大家看看,哪里不好還請多多指教,謝謝大家。 花了很長時間擼了個網(wǎng)站,觀點(diǎn),其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片:showImg(https://segmentfa...

    Invoker 評論0 收藏0
  • 圖片放大功能如何jquery實(shí)現(xiàn)

    摘要:花了很長時間擼了個網(wǎng)站,觀點(diǎn)其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片自我感覺效果還不錯,現(xiàn)在分享開來給大家看看,哪里不好還請多多指教,謝謝大家。 花了很長時間擼了個網(wǎng)站,觀點(diǎn),其中需要一個圖片放大功能,網(wǎng)上找了半天發(fā)現(xiàn)都沒有中意的,最后無奈之下自己寫了一個,演示地址,演示圖片:showImg(https://segmentfa...

    fou7 評論0 收藏0
  • 網(wǎng)站用戶頭像剪裁上傳完整案例

    摘要:做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的,剪裁后的圖片以的形式返回,怎么上傳到后臺服務(wù)器,很簡單,這里不做介紹。 做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的demo,剪裁后的圖片以bas...

    array_huang 評論0 收藏0
  • 網(wǎng)站用戶頭像剪裁上傳完整案例

    摘要:做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的,剪裁后的圖片以的形式返回,怎么上傳到后臺服務(wù)器,很簡單,這里不做介紹。 做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的demo,剪裁后的圖片以bas...

    ivan_qhz 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<