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上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
随机推荐
- linux清理缓存
在free -h中查看自己的内存发现在运行一段时间后,有很多内存都被缓存占用, 所以要清理下缓存,增大可用内存 直接进入root账户,输入以下命令 echo 3 > /proc/sys/vm/d ...
- zookeeper,通过python连接找出其对应的hive
#通过zookpeer找到对应的hive from kazoo.client import KazooClient zkClient = KazooClient(hosts="ip1:218 ...
- Delphi fmx 找不到android设备解决办法
刚接触到移动开发,很多不熟悉.配置好Android SDK后,如果用模拟器来调试程序的话,那速度会让人崩溃,我用的Nexus7平板,插上电脑,开启USB调试,但奇怪在Delphi里就是找不到 ...
- 04 SecurityContextHolder与SecurityContext说明
该篇记录一下SecurityContextHolder与SecurityContext两个类,当然还有与它们关系密码的SecurityContextPersistenceFilter.java这个过滤 ...
- APP开发者如何从应用程序中赚钱?
付费应用程序,这是应用程序最基本的赚钱方式之一,也是拥有巨大潜力的赚钱方式之一.但有一个问题开发者必须扪心自问,您的程序用户是否有一批粉丝级用户的认可,或对您应用程序品牌的认可 蝉大师APP推广工 ...
- Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)
题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...
- bugku | 你从哪里来
题目链接 之前一直以为要用x-forwarded-for ,谁道用的是referer,Orz.在此特地记录,x-forwarded-for 和 referer的区别 X-Forwarded-For(X ...
- [CSP-S模拟测试]:折射(DP)
题目描述 小$Y$十分喜爱光学相关的问题,一天他正在研究折射. 他在平面上放置了$n$个折射装置,希望利用这些装置画出美丽的折线. 折线将从某个装置出发,并且在经过一处装置时可以转向,若经过的装置坐标 ...
- python中%代表什么意思?
http://zhidao.baidu.com/link?url=MQLeRPckNfavTJYvMQbVj_pdNn5SSadtFvfEk7nNCusPcPW4T1O45esIuttuBW3EnSB ...
- Iterator,foreach遍历小计
此博客对同一操作对比两种遍历方式,以个人忘记时快速捡起为目的. 数据表: 三个List: List<Menu> menuList=menuService.getAllMenus(query ...