JS图片预览

源码分享 · 05-11 08:12

今天给大家分享一个简单的小技巧,如何使用JavaScript实现图片预览功能(无需多余的加载,秒开)。通过简单的代码,可以轻松地在网页上预览图片,为用户提供更好的视觉体验。

1.效果展示

IMG_5641.jpeg

2.代码

<!DOCTYPE html>
<html>
<head>
<title>预览图片_刘郎阁</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 预览图 */
.preview-img {
    display: none;
    text-align: center;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.7);
}

/* 容器 */
.preview-img .container {
    max-width: 100%;
    position: absolute;
    padding: 1px;
    background-color: #fafafa;   
}

/* 大图显示 */
.preview-img .container img {
    max-width: 100%;
    background-size: contain/cover;
}

/* 关闭按钮 */
.preview-img .container a {
    display: inline-block;
    width: 36px;
    height: 36px;
    text-decoration: none;
    position: absolute;
    right: 0px;
    top: 0px;
    font-family: Arial;
    color: #fafafa;
}

</style>
</head>
<body>
    
<a href="javascript:;" onclick="showPreviewImg('https://yjvc.cn/usr/uploads/IMG_3990.jpeg');ShowDescription('刘郎阁')">
    <img src="https://yjvc.cn/usr/uploads/IMG_3990.jpeg" alt="刘郎阁" width=100% height=auto>
</a>
<a href="javascript:;" onclick="showPreviewImg('https://yjvc.cn/usr/uploads/IMG_3990.jpeg');ShowDescription('刘郎阁')">
    <img src="https://yjvc.cn/usr/uploads/IMG_3990.jpeg" alt="刘郎阁" width=100% height=auto>
</a>
<div class="preview-img">
    <div class="container">
        <img src="">
        <h1><a class="close" href="javascript:void(0);">×</a></h1>
        <p id="captain">欢迎来到刘郎阁!</p> 
    </div>   
</div>
    
<script type="text/javascript">

var mBody = document.querySelector("body");// 获取body
var previewImg = document.querySelector(".preview-img");// 获取预览图
var mContainer = document.querySelector(".preview-img .container");// 获取预览图显示区域
var mImg = document.querySelector(".preview-img .container img");// 获取显示图片
var mClose = document.querySelector(".preview-img .container .close");// 获取关闭按钮
var mDescription = document.getElementById("captain");// 获取图片描述

// 显示图片描述
function ShowDescription(str){

    // 更改描述
    mDescription.innerHTML = str;
}

// 显示预览图
function showPreviewImg(url) {
        
    // 设置图片路径
    mImg.setAttribute("src", url);
    // 设置为弹性布局
    previewImg.style.display = "flex";
    previewImg.style.justifyContent = "center";
    previewImg.style.alignItems = "center";
    // 设置预览图大小
    setPreviewImgWH();
    // 当弹出预览图时下面不允许滚动
    mBody.style.overflow = "hidden"    
}
// 设置预览图大小
function setPreviewImgWH() {

    // 获取当前窗口宽度
    let windowWidth = window.innerWidth;
    // 获取当前窗口高度
    let windowHeight = window.innerHeight;
    // 判断当宽度小于高度时,使用宽度
    if (windowWidth < windowHeight) {
        // 设置图片宽高
        mImg.style.width = windowWidth * 0.8 + "px";
        mImg.style.height = "auto";
    } else {
        // 设置图片宽高
        mImg.style.height = windowHeight * 0.8 + "px";
        mImg.style.width = "auto";
    }
}

// 关闭按钮点击事件
mClose.onclick = function () {
    closePreviewImg();
}

// 预览图上点击事件取消冒泡
mContainer.onclick = function (event) {
    event.stopPropagation();
}

// 点击预览图之外的地方 关闭预览图
previewImg.onclick = function (event) {
    closePreviewImg();
}

// 关闭预览图
function closePreviewImg() {
    previewImg.style.display = "none";
    mBody.style.overflow = "scroll"
}

// 屏幕尺寸改变事件
window.onresize = function () {
    // 判断只有预览图显示的时候才设置大小
    if (previewImg.style.display != "none") {
        // 设置预览图大小
        setPreviewImgWH();
    }
};

</script>
</body>
</html>

3.写在最后

该方法可以用于网站图片展示或自建图床中,以添加用户视觉体验…… 当然,根据你自己的实际情况用到需要的地方都可以的!

组件 优化 源码分享

上一篇 : 如何限制IP访问网站

下一篇 : 不错的CSS特效2


  1. 和和   访客
    05-11 11:55 第7楼 中国陕西省西安市移动Windows 10 · Google Chrome

    我觉得 现在这种缩放在很多时候变的很鸡肋。没发现在购物网站上用就很合理,因为原始图片小嘛。哪像咱们BLOG 本身显示基本就占屏幕差不多了,再来个灯箱效果,有时候写的不好,关着还不方便。我以前也开灯箱觉得有动画效果,酷。后来体验感不好,就关了

    1. 刘郎   博主
      05-11 12:01 第8楼 中国移动iPhone · Safari
      @和和

      这个主要看个人的需求吧,所谓萝卜白菜各有所爱

  2. obaby   Lv2
    05-11 09:51 第2楼 中国山东省青岛市联通iPhone · Google Chrome

    哦吼,这个效果图让人摸不着头脑,哈哈哈。
    预览更小了。

    1. 刘郎   博主
      05-11 09:56 第3楼 中国贵州省移动Windows 10 · QQ Browser
      @obaby

      你这么一说,感觉是这么回事,是有点鸡肋😂
      不过如果觉得预览小了,可以css让他更大超大无敌大,哈哈

      1. obaby   Lv2
        05-11 09:58 第4楼 中国山东省青岛市联通iPhone · Google Chrome
        @刘郎

        所以啊,最起码不能短小不是?
        怎么也得超级无敌大吧

        1. 刘郎   博主
          05-11 10:03 第6楼 中国贵州省移动Windows 10 · QQ Browser
          @obaby

          短小精悍也是可以的,其实...只要够用
          呃咋感觉...🤣

  3. 05-11 09:09 第1个脚印 中国安徽省安庆市电信Windows 10 · Google Chrome

    还得是你啊老哥

    1. 刘郎   博主
      05-11 09:59 第5楼 中国贵州省移动Windows 10 · QQ Browser
      @胖氪笔记

      我就是我,颜色不一样的烟火😂哈哈

| 黔ICP备2024020400号-1 | 萌ICP备20246777号 | | 当前有 1 人在线 |
本站已加入BLOGS·CN
yjvc.cn
博友圈 星球穿梭
开往-友链接力