图片放大功能如何做?jquery实现
综合文库 474 1
实名

通过了实名认证的内容创造者

发布于 2018-3-12 16:11:24

您需要 登录 才可以下载或查看,没有账号?注册

x
本帖最后由 幺九 于 2020-3-22 11:47 编辑


花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片:
160718o8u7lkmoyo94o28k.jpg
[size=0.83em] [url=]采集到微库[/url]




自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教,谢谢大家。
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='<div class="zoomify-dialog-pic">'+        '<div class="dialog-body">'+            '<img src="'+url+'" class="un-magnifier">'+        '</div>'+    '</div>';    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");    }});

评分

参与人数 1活跃度 +6 展开 理由
微微一笑很... + 6 黑科技,点赞!!!

查看全部评分

本帖被以下画板推荐:

还没有设置签名!您可以在此展示你的链接,或者个人主页!
使用道具 <
左际景  发表于 2020-3-5 10:17:41  
2#
,谢谢非常好
回复 收起回复
使用道具
您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表