js手机端图片弹出方法
1 $("img").click(function(){
//获取窗口可视大小
var width=$(window).width();
var height=$(window).height();
var img=$(this);
var html='';
//获取图片的真实宽高
$("<img/>").attr("src", $(img).attr("src")).load(function() {
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth>=width ){
//$(img).css("width","100%").css("height","auto");
width="100%";
height="auto";
}
else{//如果小于浏览器的宽度按照原尺寸显示
//$(img).css("width",realWidth+'px').css("height",realHeight+'px');
width=realWidth;
height=realHeight;
}
html='<img src="'+$(this).attr("src")+'" style=" width:'+width+'"/>';
//这里借用了layer.mobile弹出插件
var pagei = layer.open({
type: 1,
content: html,
// style: 'position:fixed; left:0; top:0; width:100%; height:100%; border:none;'
});
}); });
js手机端图片弹出方法的更多相关文章
- js 监听手机端键盘弹出和收起事件
//这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.html const ua = typeof window == ...
- html5手机端遮罩弹出菜单代码
效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...
- 使用localResizeIMG3+WebAPI实现手机端图片上传
前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...
- JS组件Bootstrap实现弹出框和提示框效果代码
这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
- 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)
<img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...
- 基于jQuery图片弹出翻转特效代码
分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代 ...
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)
下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...
- Bootstrap入门(二十九)JS插件6:弹出框
Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
随机推荐
- python 关于每个项目的解释器
在写程序的时候发现了一个问题,就是我原来import的第三方包,在新建的项目里仍然报错,还需要重新下载一次 发现:原来每建一个新项目,python会默认生成另一个新的解释器和相关虚拟环境,包括第三方包 ...
- CentOS7 安装xen(在虚拟机上成功,实体机测试死机!)
此文章只做操作记录,其中有些地方可能漏了!!我只贴出自己的操作过程!其它有差别的地方请自己网上查找参考! 只有在全虚拟化下才能安装Windows,这就需要有硬件支持,并在BIOS中开启Virtuali ...
- jquery对象中 “冒号” 详解
冒号 可以理解为 “匹配” 或 “选取”的意思. $(":button") 表示匹配所有的按钮.$("input:checked")表示匹配所有选中的 ...
- flask01
-python中的web框架 -a:socket服务端 b:路由转发 c:模板渲染 -Django:a:用了别人的 b,c自己写的 -Flask:a:用了别人的 b自己写的,c:用了别人的: jinj ...
- Kattis - gcpc (treap模板)
ne hundred years from now, in 21172117, the International Collegiate Programming Contest (of which t ...
- (转)Groovy简介
转:https://www.w3cschool.cn/groovy/ Groovy的官方网站是http://www.groovy-lang.org/ Groovy是一种基于JVM(Java虚拟机)的敏 ...
- 20150709---Web中GridView控件根据绑定的数据显示不同的图片
示例图: 根据数据判断,显示各种不同的图片 该列的前端代码: <asp:TemplateField HeaderText="审图"> <ItemTemplate& ...
- Oralce常用系统函数
dual:Oracle系统内部提供的一个用于实现临时数据计算的特殊表,它只有一个列DUMMY (VARCHAR2(1)) 字符类函数: concat--连接字符串 initcap--每个单词首字母大写 ...
- PHP解码unicode编码的中文字符
问题背景:晚上在抓取某网站数据,结果在数据包中发现了这么一串编码的数据:"......\u65b0\u6d6a\u5fae\u535a......www.jinyuanbao.cn" ...
- JumpServer堡垒机安装笔记
厂商文档--一步一步安装CentOS(https://jumpserver.readthedocs.io/zh/master/setup_by_centos.html) 厂商文档--简单优化(http ...