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. python 获取文件行数

    #如果要统计文件的行数,可以这样写: count = len(open(filepath, 'r').readlines()) #这种方法简单,但是可能比较慢,当文件比较大时甚至不能工作. #可以利用 ...

  2. yield关键字详解与三种用法

    本篇文章比较硬核, 适合有一定Python基础的读者阅读, 如果您对Python还不甚了解可以先关注我哦, 我会持续更新Python技术文章 yield详解 yield与return相同每次调用都会返 ...

  3. 每天一个linux命令:head(15)

    head head命令用于显示文件的开头的内容.在默认情况下,head命令显示文件的头10行内容. 格式 head [参数] [文件] ​ 参数选项 参数 备注 -q 不显示文件名的头信息 -v 总是 ...

  4. 03 spring security执行流程分析

    spring security主要是依赖一系列的Filter来实现权限验证的,责任链设计模式是跑不了的.下面简单记录一下spring操作这些Filter的过程. 1. WebSecurityConfi ...

  5. 【Java】遍历Map<String,String>

    Map<String, String> map = new HashMap<>(); map.put("key1", "value1") ...

  6. EF框架实增删改查

    数据库链接配置: <connectionStrings> <add name="XxzxWorkEntities" connectionString=" ...

  7. [CSP-S模拟测试]:树(树形DP+期望)

    题目描述 梦游中的你来到了一棵$N$个节点的树上.你一共做了$Q$个梦,每个梦需要你从点$u$走到点$v$之后才能苏醒,由于你正在梦游,所以每到一个节点后,你会在它连出去的边中等概率地选择一条走过去, ...

  8. xshell链接linux出现SSH服务器拒绝了密码 的解决方案

    参考文章:https://blog.csdn.net/weixin_38554662/article/details/80589852 但是需要注意的是,ssh_config文件本来是没有权限修改的, ...

  9. jenkins实现手动选择分支构建项目-Git Paramater

    先下载插件: Git Paramater 参照: jenkins-参数化构建(三)插件:Git Parameter https://www.cnblogs.com/zhaojingyu/p/98624 ...

  10. 为GitLab帐号添加SSH keys并连接GitLab

    https://blog.csdn.net/xyzchenxiaolin/article/details/51852333 为github帐号添加SSH keys使用git clone命令从GitLa ...