图片放大功能如何做?jquery实现
来源:互联网 发布:景观大数据百度云盘 编辑:程序博客网 时间:2024/05/17 00:06
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片:
自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教,谢谢大家。
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"); }});
代码是毫无保留公开,绝对可以使用的,喜欢给我点个赞,也可以加我的 qq 群交流:284205104,谢谢您的阅读。
阅读全文
0 0
- 图片放大功能如何做?jquery实现
- jquery实现图片放大功能
- jquery实现图片放大功能
- jQuery插件Magnify放大镜实现javascript图片放大功能
- ASP.NET中引入JQuery实现图片放大功能
- jquery实现页面图片等比例放大缩小功能
- Jquery实现鼠标移动,放大图片的功能
- ActionScript 实现放大图片功能
- Js 实现图片放大功能
- 实现局部放大图片功能
- jQuery实现图片点击放大
- jQuery实现图片放大预览
- 鼠标悬停 图片自动放大功能 jquery
- Jquery mouseover 使用 ---图片放大功能
- ddpowerzoomer.js利用jQuery扩展,实现对图片局部放大功能(源码分析)
- ddpowerzoomer.js利用jQuery扩展,实现对图片局部放大功能(源码分析)
- js实现图片局部放大功能
- 点击图片放大功能,swift实现
- 【有关数的范围】[HDU1001]
- Java CMS GC算法 转自:http://www.iteye.com/topic/473874
- Nepire的校OJ入门题解—蓝桥选拔篇(六)
- 【canvas】根据给定数据画折线图
- 2017.12.17Day17
- 图片放大功能如何做?jquery实现
- 面向对象,封装,继承
- 手记_从生活模型抽象到计算机分布式系统RPC框架设计思路_咕泡
- linux httpd功能配置之虚拟主机
- 队列
- 20170710
- 逻辑斯蒂回归模型
- 2017.12.17Day18
- 封装一个简单的banner轮播插件