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手机端图片弹出方法的更多相关文章

  1. js 监听手机端键盘弹出和收起事件

    //这里区分不同系统,可以参考之前的文档记录 https://www.cnblogs.com/wind-wang/p/10737110.html const ua = typeof window == ...

  2. html5手机端遮罩弹出菜单代码

    效果体验:http://hovertree.com/texiao/html5/17/ 效果图: 代码如下: <!doctype html> <html lang="zh&q ...

  3. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  4. JS组件Bootstrap实现弹出框和提示框效果代码

    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...

  5. 前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

    <img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> & ...

  6. 基于jQuery图片弹出翻转特效代码

    分享一款基于jQuery图片弹出翻转特效代码.这是一款基于jQuery+HTML5实现的,里面包含六款不同效果的鼠标点击图片弹出特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代 ...

  7. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  8. 改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox)

    下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下:   像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打 ...

  9. Bootstrap入门(二十九)JS插件6:弹出框

    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...

随机推荐

  1. springboot 操作redis

    redis五大类型用法 Redis五大类型:字符串(String).哈希/散列/字典(Hash).列表(List).集合(Set).有序集合(sorted set)五种Controller:@Reso ...

  2. Spring Transaction Propagation

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11530611.html REQUIRED behavior Spring REQUIRED behav ...

  3. This MySqlConnection is already in use

    项目中类似于以下的代码,实际的代码要更复杂,DbContext是依赖注入的: 报错如下: This MySqlConnection is already in use. See https://fl. ...

  4. maven插件之maven-surefire-plugin,junit单元测试报告和sonar测试覆盖率的整合说明

    POM中配置的如下: <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId> ...

  5. 【leetcode】564. Find the Closest Palindrome

    题目如下: 解题思路:既然是要求回文字符串,那么最终的输出结果就是对称的.要变成对称字符串,只要把处于对称位置上对应的两个字符中较大的那个变成较小的那个即可,假设n=1234,1和4对称所以把4变成1 ...

  6. HDU 6058 Kanade's sum —— 2017 Multi-University Training 3

    Kanade's sum Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. Sumdiv

    题目链接 题意:求a^b的所有约数之和mod9901. 思路:因为一个数A能够表示成多个素数的幂相乘的形式.即A=(a1^n1)*(a2^n2)*(a3^n3)...(am^nm).所以这个题就是要求 ...

  8. 2019 牛客暑期多校 第三场 F Planting Trees (单调队列+尺取)

    题目:https://ac.nowcoder.com/acm/contest/883/F 题意:求一个矩阵最大面积,这个矩阵的要求是矩阵内最小值与最大值差值<=m 思路:首先我们仔细观察范围,我 ...

  9. buuctf | [强网杯 2019]随便注

    1' and '0,1' and '1  : 单引号闭合 1' order by 3--+ : 猜字段 1' union select 1,database()# :开始注入,发现正则过滤 1' an ...

  10. [CSP-S模拟测试]:string(文艺平衡树)

    题目传送门(内部题60) 输入格式 第一行三个数$n,m,k$.第二行一个长度为$n$的串.接下来$m$行每行两个数$L_i$和$R_i$. 输出格式 一个串,表示字典序第$k$小的合法的能被填出的串 ...