图片放大功能如何做？jquery实现

fou7 发布于2019-08-29 14:03 / 479人阅读

摘要：花了很长时间撸了个网站，观点其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。

花了很长时间撸了个网站，观点,其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片：

自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。

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 请放到自己的图片服务器上，万恶的 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");
    
    //容器新高度、宽度,因为图片放大了，所以容器也必须放大
    //不要用 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");
    }
});

代码是毫无保留公开，绝对可以使用的，喜欢给我点个赞，也可以加我的 qq 群交流：284205104，谢谢您的阅读。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112888.html

图片放大功能如何做？jquery实现

摘要：花了很长时间撸了个网站，观点其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。花了很长时间撸了个网站，观点,其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片：showImg(https://segmentfa...

Invoker 2019-08-01 18:14 评论0 收藏0
图片放大功能如何做？jquery实现

摘要：花了很长时间撸了个网站，观点其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片自我感觉效果还不错，现在分享开来给大家看看，哪里不好还请多多指教，谢谢大家。花了很长时间撸了个网站，观点,其中需要一个图片放大功能，网上找了半天发现都没有中意的，最后无奈之下自己写了一个，演示地址，演示图片：showImg(https://segmentfa...

objc94 2019-08-22 11:19 评论0 收藏0
网站用户头像剪裁上传完整案例

摘要：做为网站前段开发人员来说，用户头像剪裁和上传是一个很常用的功能，一般这个功能涉及到图片的放大，缩小，移动，旋转，和剪裁。下面我们来做一个完整的，剪裁后的图片以的形式返回，怎么上传到后台服务器，很简单，这里不做介绍。做为网站前段开发人员来说，用户头像剪裁和上传是一个很常用的功能，一般这个功能涉及到图片的放大，缩小，移动，旋转，和剪裁。下面我们来做一个完整的demo，剪裁后的图片以bas...

array_huang 2019-08-01 15:38 评论0 收藏0
网站用户头像剪裁上传完整案例

摘要：做为网站前段开发人员来说，用户头像剪裁和上传是一个很常用的功能，一般这个功能涉及到图片的放大，缩小，移动，旋转，和剪裁。下面我们来做一个完整的，剪裁后的图片以的形式返回，怎么上传到后台服务器，很简单，这里不做介绍。做为网站前段开发人员来说，用户头像剪裁和上传是一个很常用的功能，一般这个功能涉及到图片的放大，缩小，移动，旋转，和剪裁。下面我们来做一个完整的demo，剪裁后的图片以bas...

ivan_qhz 2019-08-20 10:28 评论0 收藏0