点击图片查看大图(纯js)
$(function(){
$(".pimg").click(function(){
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
}); function imgShow(outerdiv, innerdiv, bigimg, _this){
var src = _this.attr("src");//获取当前点击的pimg元素中的src属性
$(bigimg).attr("src", src);//设置#bigimg元素的src属性 /*获取当前点击图片的真实大小,并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function(){
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = 1000;//获取图片真实宽度
var realHeight = 1000;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 1;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if(realHeight>windowH*scale) {//判断图片高度
imgHeight = windowH*scale;//如大于窗口高度,图片高度进行缩放
imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度
if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度
imgWidth = windowW*scale;//再对宽度进行缩放
}
} else if(realWidth>windowW*scale) {//如图片高度合适,判断图片宽度
imgWidth = windowW*scale;//如大于窗口宽度,图片宽度进行缩放
imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度
} else {//如果图片真实高度和宽度都符合要求,高宽不变
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 var w = (windowW-imgWidth)/2;//计算图片与窗口左边距
var h = (windowH-imgHeight)/2;//计算图片与窗口上边距
$(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性
$(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg
}); $(outerdiv).click(function(){//再次点击淡出消失弹出层
$(this).fadeOut("fast");
});
}
<!--点击图片查看大图 --使用方法:复制如下代码即可-fwz -->
<img alt="" class="pimg" width="300" height="280" src="${picture.urlPath }">
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;">
<div id="innerdiv" style="position:absolute;">
<img id="bigimg" style="border:5px solid #fff;" src="" />
</div>
</div>
动画效果的查看图片大图
$(function(){
$w = $('.pic').width();
$h = $('.pic').height();
$w2 = $w + 350;
$h2 = $h + 180;
$('.pic').hover(function(){
$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
},function(){
$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
});
});
点击图片查看大图(纯js)的更多相关文章
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- jQuery插件——imgbox(点击图片查看大图)
需要的资源: 需要对应的js代码和css样式,大家可以通过www.htmldrive.net平台下载,也可以在我文章的底部下载.对应的资源如下,将资源引入页面(别忘了JQuery): 注意:jQuer ...
- js点击图片查看大图,并可以拖动,且滚动滑轮放大缩小
方法一:此方法在页面没有滚动条时无法缩放 JQuery function hideMax(){ $(".MAX_div").remove(); $("#Cover_Div ...
- jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况
jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...
- 查看大图、html查看大图、js查看大图
$(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#ou ...
- android开发:点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
- ionic中点击图片看大图的实现
在页面上显示了几张图片后,因为是手机端,图片会有点小的感觉,就想着怎么样才能让用户点击小图片看到大图呢,项目中ionic结合angularjs实现了这个功能 1.首先是三张小图上应添加一个函数,当点击 ...
- 点击小图查看大图jQuery插件FancyBox魔幻灯箱
今日发现一个不错的JQuery插件FancyBox,也许早就有这个插件了,但是没名字,我就暂且叫他魔幻灯箱吧,采用Mac系统的样式.网传主要有以下功能:■弹出的窗口有很漂亮的阴影效果.■关联的对象(就 ...
随机推荐
- (转) eclipse项目中.classpath文件详解
背景:对于java项目中.classpath文件中的相关定义一直不是很了解,有必要进行深入的学习. 1 前言 在使用eclipse或者myeclipse进行Java项目开发的时候,每个project( ...
- ELK应用之二:Kibana显示Nginx中来访客户端IP地域分布
在Kibana的visualize中显示Nginx访问日志客户端IP地域分布图 官网介绍: https://www.elastic.co/guide/en/beats/packetbeat/curre ...
- Java基础-SSM之Spring MVC入门篇
Java基础-SSM之Spring MVC入门篇 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Spring MVC简介 1>.什么是Spring MVC 答:Sprin ...
- python创建与遍历List二维列表
python创建与遍历List二维列表 觉得有用的话,欢迎一起讨论相互学习~Follow Me python 创建List二维列表 lists = [[] for i in range(3)] # 创 ...
- bzoj千题计划257:bzoj4199: [Noi2015]品酒大会
http://www.lydsy.com/JudgeOnline/problem.php?id=4199 求出后缀数组的height 从大到小枚举,合并 维护组内 元素个数,最大.次大.最小.次小 # ...
- bzoj千题计划191:bzoj2337: [HNOI2011]XOR和路径
http://www.lydsy.com/JudgeOnline/problem.php?id=2337 概率不能异或 但根据期望的线性,可以计算出每一位为1的概率,再累积他们的期望 枚举每一位i,现 ...
- C#的Struct
- html文件中jquery与velocity变量中的$冲突的解决方法
1.使用jQuery代替$. 如:jQuery.ajax(); 缺点:不适合扩展,一旦替换成第三方库时,那就麻烦大发 2.使用jQuery.noConflict. 如:var j = jQuery.n ...
- 正则tips
在啃Sizzle源码,被几个正则表达式给难住了,写了一下正则demo,记录一下 1,按照定义[]和(?:)里的内容不计入捕获组的数目 2,捕获组的计数顺序是,从大到小,同级从左到右 例如 var re ...
- JS 简易控制台插件 [供 博客, 论坛 运行js用]
今天厚着脸皮来推荐下鄙人写的一个小插件吧.看过我博客的应该都熟悉这个插件了,其实就是这货. 这东西是我去年写的,当时水平也不怎么样,不过好歹还是实现了简单功能.我先简单介绍下这东西什么用吧. 因为在 ...