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. 【leetcode】609. Find Duplicate File in System

    题目如下: Given a list of directory info including directory path, and all the files with contents in th ...

  2. View使用总结

    1. View的基础知识 View的位置参数 —— 相对于父容器的位置 view在平移时,top和left表示的是原始左上角位置信息,值不会改变, 改变的是x,y(View左上角坐标),transla ...

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

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

  4. python中常用得字符串,列表函数汇总

    字符串函数: 1,replace函数,替换函数.s = s.replace(old,new),老得元素被新的元素替换.注意不能直接写s.replace(old,new).要写s=s.replace(o ...

  5. 团队冲刺DAY1

    团队冲刺DAY1 今天的内容是对未来6天的突击有一个大致的规划. 我们小组的选题是客户端-服务器安全信息传递系统,通过讨论,我们认为大概有四个难题. 第一个是服务器和客户端,我们打算用第二天来完成. ...

  6. IIS的站点配置存储在applicationHost.config

    C:\Windows\System32\inetsrv\Config\applicationHost.config

  7. English-Words with 'ir'

    hire thirty thirteen third sir birthday shirt stir circle dirty skirt affirm affirmation affirmable ...

  8. opensuse 安装APACHE2+MYSQL+PHP5

    sudo zypper in apache2-mod_php5 apache2 mariadb 装好后, 记得启动APACHE2对PHP的支持: a2enmod php5 默认mysql密码为空, 可 ...

  9. git用法小结

      共享仓库     bare 裸仓库   生成裸仓库时必须以.git结尾.   仓库就相当于一个服务器     ### 创建远程仓库  1. 创建以.git结尾的目录mkdir repo.git 2 ...

  10. delphi xe2 panel 无法 遮盖 label 的 解决方案。

    百度  没有找到此答案.  问群,也没答案. 根据群友的提示. 找到的解决的办法. 很简单. ParentBackground 设置为 false.