html点击图片可以放全屏,html:点击图片放大到全屏,再次点击缩回

article/2025/7/4 14:10:11

做手机网页开发时,经常遇到的效果:点击某个不加链接的图片时,图片放大,当再次点击放大的图片时,图片缩回(实质上将层隐藏掉了)。

实现思路:

准备原材料:一个遮档整个屏幕的不透明接近黑色的背景层(

),一个位于背景层之上的图片容器(

) ;

加工过程:当点击不加链接的图片时,将黑色背景层显示,再通过计算原始图片尺寸与手机屏幕尺寸,使图片以恰当的比例显示在图片容器中,将图片容器显示;

当再次点击放大的图片时,将黑色背景层和图片容器隐藏。

贴出代码:

HTML:

imgSrc

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);


http://chatgpt.dhexx.cn/article/hV4kqFmm.shtml

相关文章

利用css 把背景图片全屏铺满

1.html代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!--引入我自己写的css文件--><link text"text/css" rel"stylesheet" href"../cs…

html5设置全屏背景图,HTML5 body设置全屏背景图片 如何让body的背景图片自适应整个屏----实战经验...

用什么代码实现&#xff1f;不允许有白色底色产生&#xff0c;因为手机高度不一样 错误的写法&#xff1a;加到div中结合图片设置min-height&#xff0c;但是页面不会回弹 话不多说直接上代码 终极方案 html,body{ width:100%; height:100% } 再加一段 body{ font-family: &quo…

html背景图片手机端全屏,css 背景图全屏显示,兼容移动端

.login { background: url(img/login.jpg) no-repeat center center; background-size: cover; background-attachment: fixed;//当页面的其余部分滚动时&#xff0c;背景图像不会移动。 width: 100%; height: 100%; position: fixed; top: 0; left: 0; right: 0; bottom: 0; }…

HTML全屏背景图

当我们在写前端页面的时候为了页面的美观我们通常会为页面设置图片背景&#xff0c;那么我们如何来设置全屏的背景图呢&#xff1f;&#xff1f;&#xff1f; 设置全屏背景图需要三个属性 background-image: url(img/untitled.png);background-repeat: no-repeat;background-s…

html怎么设置背景图 一张图平铺,html怎么设置背景图片全屏平铺?_WEB前端开发...

ps画笔工具快捷键是什么&#xff1f;_WEB前端开发 ps画笔工具的快捷键是“B”&#xff1b;默认使用前景色绘图&#xff0c;通过设置后可以多种色彩一起绘制。ps的画笔分为了4类&#xff1a;常规画笔、干介质画笔、湿介质画笔、特殊效果画笔。 html怎么设置背景图片全屏平铺&…

html背景图片如何自动平铺,html怎么设置背景图片全屏平铺?

html怎么设置背景图片全屏平铺&#xff1f; 1、新建一个html文档。 2、设置一下HTML的框架&#xff0c;然后把图片设置在同一个文件夹里面。 3、加入&#xff0c;这样可以有样式设置。 4、因为背景设置在主体&#xff0c;所以还要定义为body{}。 5、background-image:url(图片)…

html 怎么让背景图铺满整个页面

为了让背景图片铺满整个页面&#xff0c;我们可以这样设置&#xff1a; 第一、页面只有屏幕大小&#xff1a; background: url(../images/banner.jpg) no-repeat;background-size: 100% 100% ; 如果页面大于屏幕时&#xff0c;如果滑动就会出现白板 第二、页面随内容大小变化…

自媒体大咖啡馆钦佩的5个流行点标题规则

由于大多数自媒体浏览方式都是受手机界面限制的手机&#xff0c;因此读者通常会看到标题然后看内容。如果在看到标题时不允许读者阅读冲动&#xff0c;则读者不能被标题所吸引。进入&#xff0c;媒体文章基本上可以宣告失败。因此&#xff0c;媒体文章标题的发音与传统新闻&…

《惢客创业日记》2020.06.19(周五)为“创业日记”写序(五)

今天&#xff0c;继续给您分享《惢客创业日记》这本书的第五个序&#xff0c;提到这个人&#xff0c;不得不让我想起面试的那一幕&#xff0c;记得当时&#xff0c;他留着长头发&#xff0c;一身艺术范儿&#xff0c;再加上长的白白净净&#xff0c;一幅小鲜肉模样&#xff0c;…

你什么都没错,只是太老了。

我从业到现在已经十年多了&#xff0c;这个问题是我从业五到七八年时最苦恼的话题。当时觉得这个世界太不友好了&#xff0c;互联网这个行业全是年轻人&#xff0c;30岁以上就压力非常大&#xff0c;我缓解这种压力的方式就是每个周末必须得去做一些我认为比较有意义的事。 说…

王高飞:微博已收购一直播 明年一季度重点是功能与流量打通

雷帝网 乐天 11月29日报道 微博首席执行官王高飞昨日在电话会议中表示&#xff0c;刚刚过去的十月&#xff0c;微博对一直播进行了收购&#xff0c;在未来的一到两个季度内&#xff0c;微博的工作重点是改善目前的产品。 “我们在明年的一季度重心可能会放在一直播产品和微博产…

菲鹏生物冲刺创业板上市:毛利率稳中有降,崔鹏、曹菲夫妇控股

2023年1月6日&#xff0c;菲鹏生物股份有限公司&#xff08;下称“菲鹏生物”&#xff09;在深交所更新招股书&#xff08;注册稿&#xff09;&#xff0c;准备在创业板上市&#xff0c;泰联合证券为其独家保荐人。本次冲刺上市&#xff0c;菲鹏生物计划募资25.056亿元。 其中…

腾讯产品总监曹菲:如何克服职业焦虑

文/腾讯产品总监曹菲 我从业到现在已经十年多了&#xff0c;这个问题是我从业五到七八年时最苦恼的话题。当时觉得这个世界太不友好了&#xff0c;互联网这个行业全是年轻人&#xff0c;30 岁以上就压力非常大&#xff0c;我缓解这种压力的方式就是每个周末必须得去做一些我认为…

腾讯产品总监曹菲:为何我工作十年,内心仍无比恐慌?

&#xfeff;&#xfeff; http://weibo.com/p/1001603900812270122967?sudarefwww.sogou.com http://www.woshipm.com/pmd/291935.html 主讲&#xff1a;曹菲 腾讯产品研发中心总监 来源&#xff1a;馒头商学院&#xff08;ID&#xff1a;mantousxy&#xff09;开学大课节选 …

腾讯产品总监曹菲:深度剖析产品经理的发展之路(真心干货长文慎入)

我从业到现在已经十年多了&#xff0c;这个问题是我从业五到七八年时最苦恼的话题。当时觉得这个世界太不友好了&#xff0c;互联网这个行业全是年轻人&#xff0c;30岁以上就压力非常大&#xff0c;我缓解这种压力的方式就是每个周末必须得去做一些我认为比较 ... 很开心今天能…

腾讯产品总监曹菲:产品经理们,五年后,你会失业吗? 【上】

馒头商学院2015年开学大课顺利结束&#xff0c;腾讯产品总监曹菲&#xff0c;前央视主持人、凯叔讲故事创始人王凯&#xff0c;文案大咖李叫兽&#xff0c;前凡客营销副总裁、《一个人的电商》作者许晓辉&#xff0c;杜蕾斯策划人、环时互动CKO老金&#xff0c;为大家带来了全天…

DP4054国产锂电池500mA充电管理芯片替代LTC4054/TC4054

目录 DP4054简介DP4054芯片特性应用领域 DP4054简介 DP4054是一款单节锂离子电池恒流/恒压线性充电器&#xff0c;简单的外部应用电路非常适合便携式设备应用&#xff0c;适合USB电源和适配器电源工作&#xff0c;内部采用防倒充电路&#xff0c;不需要外部隔离二极管。热反馈…

FS4068四节锂电池充电管理控制芯片

FS4068 是一款工作于 2.7V 到 6.5V 的 PFM 升压型四节锂电池充电控制集成电路。 FS4068采用恒流和恒压模式对电池进行充电管理&#xff0c;内部集成有基准电压源&#xff0c; 电感电流检测单元&#xff0c;电池电压检测电路和外置场效应晶体管驱动电路等&#xff0c; 具有外部元…

高耐压锂电池充电管理芯片CL4054H CL4056H CL4267H CL4051M CL4064M

产品介绍 CL4056H是一款性能优异的单节锂离子电池恒流/恒压线性充电器。CL4056H采用ESOP8封装配合较少的外围原件使其非常适用于便携式产品&#xff0c;并且适合给USB电源以及适配器电源供电。 基于特殊的内部MOSFET架构以及防倒充电路&#xff0c;CL4056H不需要外接检测电阻和…