html点击图片可以放全屏,html:点击图片放大到全屏,再次点击缩回
做手机网页开发时,经常遇到的效果:点击某个不加链接的图片时,图片放大,当再次点击放大的图片时,图片缩回(实质上将层隐藏掉了)。
实现思路:
准备原材料:一个遮档整个屏幕的不透明接近黑色的背景层(
),一个位于背景层之上的图片容器(
) ;
加工过程:当点击不加链接的图片时,将黑色背景层显示,再通过计算原始图片尺寸与手机屏幕尺寸,使图片以恰当的比例显示在图片容器中,将图片容器显示;
当再次点击放大的图片时,将黑色背景层和图片容器隐藏。
贴出代码:
HTML:
CSS:
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
jQuery:
var imgsObj = $('.amplifyImg img');//需要放大的图像
if(imgsObj){
$.each(imgsObj,function(){
$(this).click(function(){
var currImg = $(this);
coverLayer(1);
var tempContainer = $('
');//图片容器
with(tempContainer){//width方法等同于$(this)
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//获取图片原始宽度、高度
var orignImg = new Image();
orignImg.src =currImg.attr("src") ;
var currImgWidth= orignImg.width;
var currImgHeight = orignImg.height;
if(currImgWidth35){/*此处为了使图片高度上居中显示在整个手机屏幕中:因为在android,ios的微信中会有一个title导航,35为title导航的高度*/
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('
');
}else{
css('top',0);
html('
');
}
}else{
var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
if(currImgChangeHeight35){
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('
');
}else{
css('top',0);
html('
');
}
}
}
tempContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
}
else{
return false;
}
//使用禁用蒙层效果
function coverLayer(tag){
with($('.over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#191919");
}
else{
css('display','none');
}
}
}
html点击图片可以放全屏,html:点击图片放大到全屏,再次点击缩回相关推荐
- java之点击一次之后失效_JavaScript 事件绑定只能执行一次了,再次点击就变得无效 ,求助怎么回事...
点击收藏,弹出提示框,询问是否取消收藏,然后点击提示框里面的关闭按钮,关闭提示框后.再次点击那个触发事件的 收藏按钮就会无效 图片描述 var collectionBtn = document.que ...
- Android 点击图片放大至全屏 再次点击关闭过度动画 Shared Element效果(共享元素效果)
Android 点击图片放大至全屏 再次点击关闭过度动画 最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
- Android浏览图片,点击放大至全屏效果
最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到 ...
- android图片点击全屏显示,Android浏览图片,点击放大至全屏效果
近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果. 例如以下. 我不知道QQ那个是怎么做的.我的思路例如以下: 首先.从图片缩 ...
- Android:浏览图片,点击放大至全屏效果
最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到 ...
- android 图片点击一下就放大到全屏,再点一下就回到原界面
/*android 图片点击一下就放大到全屏,再点一下就回到原界面 */ public class MainActivity extends Activity { /** Called when th ...
- 点击图片放大全屏加载,再次点击图片/文档回到原来位置
导读:生命不息,折腾不止 第二次写文章,其实我一直都不明白为什么很多人喜欢写文章,现在我好想知道一点点了,学到的东西一旦过了一段时间,好像就忘了- 看来写文章,或许有这么个原因吧,担心有一天忘了. 回 ...
- html:点击图片放大到全屏,再次点击缩回
做手机网页开发时,经常遇到的效果:点击某个不加链接的图片时,图片放大,当再次点击放大的图片时,图片缩回(实质上将层隐藏掉了). 实现思路: 准备原材料:一个遮档整个屏幕的不透明接近黑色的背景层(< ...
- 巧用图片,处理竖屏视频上下黑边,打造全屏观感
喜欢刷视频的朋友都知道,一些竖屏的视频下下都有黑边,展示视频时不是很好看,别急小编给你分享使用图片,遮挡黑边,使视频成全屏的竖屏播放,下面看操作. 准备工具: 安装一个视频剪辑高手(在这个官网上可以下 ...
- 制作一份手机录屏的 GIF 动态图片
制作一份手机录屏的 GIF 动态图片 在前两天我写了一个关于时间轴的文章,当时在文章里面提到过不会制作 GIF 图片,越来越感觉不合适,毕竟看到好多大牛的博客.还有 GitHub 上的项目,好多都有 ...
最新文章
- (DML触发器)如何正确理解触发器的deleted表和inserted表(转)
- 【错误记录】发布 Flutter 插件包报错 ( It‘s strongly recommended to include a “homepage“ or “repository“ field )
- 【Scratch】青少年蓝桥杯_每日一题_8.17_报数
- html class和id,css教程之样式表的基本语法(二) class(类)和id的一个小实例
- SVN卸载,修复,等问题:依赖服务或组无法启动.(0x8007042c)解决之一
- python mysql ssl,python – 在SQLAlchemy中使用SSL
- 使用Java来格式化时间
- python do while语句_python控制语句执行流程(while)
- Java基础学习总结(115)——Java 类加载机制详解
- 【数据处理】奇异值分解(SVD) 数据降噪的python实现
- MaxScript 例子 渲染
- c语言地址符作用,理解C语言取地址符
- ANDROID_MARS学习笔记_S04_004_用HTTPCLENT发带参数的get和post请求
- 安装igraph踩过的坑
- 长期喝可乐会造成记忆障碍,还更容易患病,“可乐自由”竟然都这么难
- python自动换行符,python单击帮助格式化换行符
- ENVI扩展工具:航拍影像坏点修复专用补丁
- 基于神经网络rnn模型心脏病特征预测心脏病
- ssm+JSP计算机毕业设计海洋之心项链专卖网ffv1b【源码、程序、数据库、部署】
- 楷书书法规则_1.硬笔书法 楷书规则