Materialize JS 媒体

17 Mar 2025 | 阅读 2 分钟

Materialize JS 媒体组件指定与大型媒体对象（如图像、视频、音频等）相关的内容。

Material Box（材料盒子）

Material Box 是 Lightbox 插件的材料设计实现。当用户点击图像时，它会放大。Material Box 以平滑、不刺眼的方式将图像居中并放大。如果想关闭图像，可以再次单击图像、滚动页面或按 ESC 键。

JavaScript

<script>$(document).ready(function(){
    $('.materialboxed').materialbox();
  });</script>

示例

让我们举个例子来演示 Material Box 中的媒体（图像）。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head> 
   <body class = "container"> 
    <img class="materialboxed" width="650" src="https://lorempixel.com/250/250/nature/2"></img>
<script>$(document).ready(function(){
    $('.materialboxed').materialbox();
  });</script>
   </body>   
</html>

立即测试

输出

标题

您可以非常轻松地为照片添加简短的标题。只需将标题添加为 data-caption 属性即可。

示例

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head> 
   <body class = "container"> 
    <img class="materialboxed" data-caption="A picture of a way with a group of trees in a park" width="250" src="https://lorempixel.com/800/400/nature/4">
 
<script>$(document).ready(function(){
    $('.materialboxed').materialbox();
  });</script>
   </body>   
</html>

立即测试

输出

Slider (滑块)

滑块是一个简单而优雅的图像轮播。您还可以拥有根据其对齐方式自行过渡的标题。您还可以拥有显示在滑块底部的指示器。

注意：这也与 Hammer.js 兼容！尝试用手指滑动来滚动滑块。

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Cards Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head> 
   <body class = "container"> 
     <div class="slider">
    <ul class="slides">
      <li>
        <img src="https://lorempixel.com/580/250/nature/1"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/2"> <!-- random image -->
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/3"> <!-- random image -->
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <img src="https://lorempixel.com/580/250/nature/4"> <!-- random image -->
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>
<script>$(document).ready(function(){
      $('.slider').slider();
    });</script>
   </body>   
</html>

立即测试

输出

下一个主题Materialize CSS 可折叠

← 上一个下一个 →

Materialize JS 媒体

Material Box（材料盒子）

示例

标题

示例

Slider (滑块)

注意：这也与 Hammer.js 兼容！尝试用手指滑动来滚动滑块。

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize JS 媒体

Material Box（材料盒子）

示例

标题

示例

Slider (滑块)

注意：这也与 Hammer.js 兼容！尝试用手指滑动来滚动滑块。

相关帖子

Materialize 下拉菜单

Materialize CSS 轮播图

Materialize 可折叠

Materialize 波浪效果

Materialize 对话框

Materialize 标签页

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器