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. GSL+DevC++使用

    在DEV C++中配置GSL1.8库 前面写了如何在vs2005中添加gsl,本文所所述为在dev c++中使用gsl库,由实践总结而得. 准备软件: 1.Orwell Dev C++ 5.6.2 N ...

  2. java 通过反射调用属性,方法,构造器

    package reflection2; import static org.junit.Assert.assertArrayEquals; import java.lang.reflect.Cons ...

  3. BZOJ 2281: [Sdoi2011]黑白棋(dp+博弈论)

    传送门 解题思路 首先发现可以把相邻的黑白棋子之间的距离看成一堆棋子,那么这个就可以抽象成\(Nim\)游戏每次可以取\(d\)堆这个游戏,而这个游戏的\(SG\)值为\(x\%(d+1)\),那么题 ...

  4. LG1440 求 m 区间内的最小值

    题目描述 一个含有 \(n\) 项的数列 (\(n≤ 2000000\)),求出每一项前的 \(m\) 个数到它这个区间内的最小值.若前面的数不足 \(m\) 项则从第 \(1\) 个数开始,若前面没 ...

  5. 2018-2019 2 20165203 《网络对抗技术》Exp8 Web基础

    2018-2019 2 20165203 <网络对抗技术>Exp8 Web基础 实验要求 1.本实践的具体要求有: (1) Web前端HTML(0.5分) 能正常安装.启停Apache.理 ...

  6. git add 添加错文件的撤销方法

    git add 添加 多余文件 这样的错误是由于,有的时候 可能 git add . (空格+ 点) 表示当前目录所有文件,不小心就会提交其他文件 git add 如果添加了错误的文件的话 撤销操作 ...

  7. Linux后台执行脚本 &与nohup

    Linux后台执行脚本的方式: 0.脚本代码 [root@VM_1_3_centos apps]# cat test.php <?php sleep(5); echo "hello w ...

  8. css控制显示超出多少行以后开始出现省略号的写法

    display: -webkit-box; display: -moz-box; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsi ...

  9. MATLAB 中几个颜色空间的坐标范围

    在一些图象处理的程序中,我们经常要在不同的颜色空间操作,而且经常要把各颜色空间的坐标转化到 [0,1] 之间,这就需要知道一些常用颜色空间的坐标范围. 虽然可以通过颜色空间转化的公式推导这些范围,但是 ...

  10. 解决Flutter boost模块化加入到原有android项目后,首次加载过慢的问题

    由于Flutter boost目前还没有很好的解决方案,所以只能魔改了,大致的思路就是在刚打开app的时候就初始化一个不可见的Flutter页面,让其自动注册&初始化. 先编写一个Flutte ...