jquery点击图片全屏

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。点击图片全屏是指当用户点击一张图片时，该图片会扩展到整个屏幕显示。

类型

基于 CSS 的全屏：通过修改图片的样式属性实现全屏。
基于 JavaScript 的全屏：调用浏览器提供的全屏 API 实现全屏。

应用场景

画廊展示：在图片画廊中，用户可以点击任何一张图片查看其全屏版本。
产品展示：在线商店中，允许用户点击产品图片以全屏方式查看细节。

示例代码

以下是一个简单的示例，展示了如何使用 jQuery 和 CSS 来实现点击图片全屏的功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 图片全屏示例</title>
<style>
  .fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    object-fit: contain; /* 保持图片比例 */
  }
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('img').click(function(){
    var src = $(this).attr('src');
    $('<img>').attr('src', src).addClass('fullscreen').appendTo('body');
  });

  $(document).on('click', '.fullscreen', function(){
    $(this).remove();
  });
});
</script>
</head>
<body>

<img src="example.jpg" alt="示例图片" width="300">

</body>
</html>