jq双击放大图片_Jquery图片点击放大
jquery点击放大整理
身份证图片
$(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属性
/*获取当前点击图片的真实大小,并显示弹出层及大图*/
$("").attr("src", src).load(function(){
var windowW = $(window).width();//获取当前窗口宽度
var windowH = $(window).height();//获取当前窗口高度
var realWidth = this.width;//获取图片真实宽度
var realHeight = this.height;//获取图片真实高度
var imgWidth, imgHeight;
var scale = 0.8;//缩放尺寸,当图片真实宽度和高度大于窗口宽度和高度时进行缩放
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");
});
}
1$(".pimg") jquery选择class="pimg"
2.attr() jquery属性操作
3.css() jquery css操作
4.fadeIn() jquery使用淡入效果来显示被选元素,假如该元素是隐藏的
5.fadeOut() jquery 使用淡出效果来隐藏被选元素,假如该元素是隐藏的
6position css规定元素的定位类型 position:fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
7display css定义建立布局时元素生成的显示框类型 none:隐藏,border:显示
8border 设置所有的边框属性
9z-index 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
jq双击放大图片_Jquery图片点击放大相关推荐
- jQuery Zoom 图片聚焦或者点击放大A plugin to enlarge images on touch, click, or mouseover
下载: zoom-master 项目地址: https://github.com/jackmoore/zoom Compatible with: jQuery 1.7+ in Chrome, Fire ...
- body div js 放大图片_jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- html中如何实现放大动画,CSS3实现点击放大的动画实例
这次给大家带来CSS3实现点击放大的动画实例,CSS3实现点击放大动画实例的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 最近在工作中遇到一个需求,实现的效果是当点击商品图片右上的收藏按钮触 ...
- 图片浏览(点击放大缩小支持多张图片浏览)
大神写的,我就参考参考啦! 从主布局开始了 <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- Lightbox相册,图片滚动和点击放大
演示地址:http://www.corange.cn/demo/3740/index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- jquery实现截取pc图片_jquery 图片截取工具jquery.imagecropper.js
除了jquery,本插件还引用了UI库,包括ui.draggable.js ImageCropper 演示需要asp.net支持.测试通过 ImageCropper 下载 https://www.jb ...
- layui数据表格中展示图片及图片预览
在项目中遇到数据表格中放入图片同时可以点击放大预览.预览方式我才用的是layer方式.代码如下: layui.use('table', function(){var table = layui.tab ...
- android+放大缩小图片+有jar嘛,Android相册支持点击放大图片,滑动切换图片,手势放大缩小...
[实例简介] 项目使用了开源框架Universal-Image-Loader 显示本地图库所有照片 点击放大,单击退出 双击放大缩小 支持左右滑动查看图片 支持手势放大缩小图片 [实例截图] [核心代 ...
- Android自定义ImageView(二)——实现双击放大与缩小图片
效果图: 首先设置图片依据控件的大小来显示在ImageVeiw中 也就是当图片的宽与高小于控件的宽与高的时候,默认不进行对图片进行放大的操作,但是会将图片居中显示,当然使用的时候可以使用自定义的属性i ...
最新文章
- 【Android NDK 开发】JNI 线程 ( JNI 线程创建 | 线程执行函数 | 非 JNI 方法获取 JNIEnv 与 Java 对象 | 线程获取 JNIEnv | 全局变量设置 )
- leetcode 82. 删除排序链表中的重复元素 II
- pycharm调出参数提示气泡
- python编程,外星人飞船
- 解析可变参数函数的实现原理(printf,scanf)
- Python | 程序从列表中删除重复的元素
- 福师离线 微型计算机与外部,福师《计算机应用基础》离线作业答案
- 企业数据可视化大屏的三大优势
- 外贸客户类型及跟进策略、找客户渠道
- 音频参数测试软件,音频测试参数详解.doc
- 摄像机标定的简单理解与纪要
- 42pinQFN芯片焊接总结
- 富贵论坛的来历和背景
- office2020与2016版的不同_office2019和2016区别|Office2019新功能
- opencv把图片转换成二进制_Python+OpenCV实现将图像转换为二进制格式
- 数据结构课程设计(四):行车路线问题(C++、图、迪杰斯特拉算法、最短路径)
- http请求头部(header)详解
- 源码分析 There is no getter for property named '*' in 'class java.lang.String
- 80老翁谈人生(203):748工程支撑王选最终走向成功!
- 对日软件外包开发浅谈
热门文章
- LTE学习之路(1)——移动通信技术发展历程
- 《中国人工智能学会通讯》——1.45 先做个普及,到底什么是虹膜识别
- LocalDateTime获取当日00:00、结束时间23.59与当月第一天00.00,月末最后一天23.59
- 【英语】睡不醒的November
- 一款丧心病狂的API测试工具:Apifox!
- 心法利器[70] | 短文本理解的难点和解决方案
- 计算机网络的八大性能指标,速率、带宽、吞吐量、时延、时延带宽积、往返时间、利用率、丢包率
- Js生成指定长度和基数的UUID
- 更相减损法java,五十6、从高中碾转相除法、更相减损术算法谈起
- 芳华永在!一个老运维的20年奋斗史