点击图片实现图片居中放大的功能 |
您所在的位置：网站首页 › excel查看图片放大功能图标不见了 › 点击图片实现图片居中放大的功能 |
点击图片实现图片居中放大的功能
|
如题，我想要点击图片的时候弹出居中显示放大。这个功能也是看别人的实现方法而来的，只是有细微的变化轻松解决点击图片放大问题 下面是我自己仿造他写的 点击图片放大 .imgPreview { display: none; top: 0; left: 0; width: 100%; /*容器占满整个屏幕*/ height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); } .imgPreview img { z-index: 100; width: 60%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); } /*添加鼠标移入图片效果*/ .img { cursor: url("ico/放大镜.png"), auto; } $(function () { $('.img').on('click', function () { var src = $(this).attr('src'); $('.imgPreview img').attr('src', src); $('.imgPreview').show() }); $('.imgPreview').on('click', function () { $('.imgPreview').hide() }); })效果如下 其样式为 .imgPreview { display: none; top: 0; left: 0; width: 100%; /*容器占满整个屏幕*/ height: 100%; position: fixed; background: rgba(0, 0, 0, 0.5); }1. 实现包含块全屏显示： 开启定位fixed脱离文档流，设置top和left为0（最好top和left都要设置0，我看原作者只设置了top，但我在应用到bootsrap中的时候会出现左边没有覆盖完，必须要设置left也为0），width和height100%使的包含块全屏覆盖，最后设置了半透明度。因为开始设置的隐藏，只有单击图片后才会全屏覆盖显示。 2. 实现图片居中显示： 通过jquery将包含块里的src设置成原有的图片src，然后通过设置包含块内的css样式达到居中放大的目的。其中通过设置width的值（百分比是相对于屏幕尺寸）达到放大的目的，通过设置top和left（百分比是相对于屏幕尺寸）进行定位，使得图片左上角在屏幕正中间，然后设置transform：translate（-50%，-50%）相对自身尺寸移动，使得图片中心位置移动到屏幕中心位置。 .imgPreview img { z-index: 100; width: 60%; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); }ps1：中间的代码添加了cursor属性是为了给鼠标移入图片时鼠标指针变成放大镜的模样，具体见通过添加css样式cursor属性，改变鼠标的外形，变成放大镜 ps2:开启fixed定位后，width、height、left、top的百分比都是相对于屏幕而言 |
大致说下原理，点击图片触发单击响应事件，半透明的包含块全屏显示，然后图片进行放大居中显示。 包含块如下：【本文地址】
今日新闻 |
推荐新闻 |