图片放大功能如何做?jquery实现
花了很长时间撸了个网站,观点,其中需要一个图片放大功能,网上找了半天发现都没有中意的,最后无奈之下自己写了一个,演示地址,演示图片:
自我感觉效果还不错,现在分享开来给大家看看,哪里不好还请多多指教,谢谢大家。
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,谢谢您的阅读。
图片放大功能如何做?jquery实现的更多相关文章
- 图片放大功能插件及jquery.extend函数理解
前端时间,产品提出社区评论中的图片需要有放大功能.感觉可以共用,所以就想整合一个插件,过程中也借鉴了一些例子. 分析下自己的代码思路: var scaleImg = function(opts) { ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- Typora配置双击图片放大功能
在Typora中,默认没有点击图片放大功能,本文就教大家如何配置该功能. 我的环境版本 Typora版本:0.11.13 LightBox版本:2.11.3 下载LightBox 可以从Github下 ...
- jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- html实现点击图片放大功能
话不多说,直接上代码 <html> <head> <style> .over {position: fixed; left:0; top:0; width:100% ...
- 使用Layer完成图片放大功能
序言:在写这个功能之前也用了zoom.js,zoom.js用起来简单引用js然后设置图片属性就可以放大.但是放大后的图片模糊.没有遮罩.在放大图片时其它图片布局会受到影响,当然如果觉得这些都是小问题的 ...
- 微信sdk 图片上传 两种方法 上传一张显示一张 并附带微信图片放大功能和删除功能
html <!--上传图片--> <div class="upload-mod"> <div class="up-box" id= ...
随机推荐
- codeforces 895B XK Segments 二分 思维
codeforces 895B XK Segments 题目大意: 寻找符合要求的\((i,j)\)对,有:\[a_i \le a_j \] 同时存在\(k\),且\(k\)能够被\(x\)整除,\( ...
- google软件测试之道读后感(一)
这几天在抽空读一本新书,久负盛名的<google软件测试之道>.之前在网络上一点一点地看过它的英文版,很受触动,还做了很长的读书笔记,现在看到了中文版,才恍觉之前的好些理解存在不恰当的地方 ...
- haproxy,tomcat.apache记录用户真实IP
Haproxy配置: default加入: option httpclose option forwardfor Tomcat配置: server.xml中添加 prefix="localh ...
- bootstrap-select多选下拉列表插件使用小记
下载插件 插件地址:http://silviomoreto.github.io/bootstrap-select/ 下载好后引用css和js文件 <!-- 因为是jquery插件,所以引用前先引 ...
- 处理eclipse启动时报java.lang.IllegalStateException
这是我写的第一篇博客,博客我来了: 我是好学的人,希望在这上面遇到志同道合的人,对技术有更高追求的人: 重启eclipse的时候报出来 An error has occurred, See the l ...
- Python Django CMDB项目实战之-1如何开启一个Django-并设置base页、index页、文章页面
1.环境 win10 python 2.7.14 django 1.8.2 需要用到的依赖包:MySQLdb(数据库的接口包).PIL/pillow(处理图片的包) 安装命令: pip install ...
- Unix:关于一个file在file system和disk中占用空间
參考文献: Harley Hahns:Guide to Unix and Linux. Chap 24 -->首先要有的关键概念:the amount of "disk space&q ...
- 掌上快递 APP 项目之概述篇
概述 学习Android开发也有一段时间了,利用业余时间独立制作的一款快递类APP软件.大概2个多星期吧,自己将其定位为"集快递信息追踪.附近快递点查询. 快递公司投诉功能为一体的便民生活类 ...
- Explicit Semantic Analysis (ESA)
有别于LSA (Latent Semantic Analysis), 下列文章提出一种ESA (Explicit Semantic Analysis), 并介绍怎样使用ESA来进行语义相关性和文本分类 ...
- linux 虚拟机模拟配置网络路由环境-简版
前言:网络路由不管是平常在家里,还是在公司中,都是必需配置的,所以还是非常重要的,今天小编就给大家做个配置网络路由配置的小实验,仅供大家参考. 一.首先,来简单介绍一下网络路由. 1. 网络路由: ...