srcmini本文概述
Materialize JS媒体组件指定与大型媒体对象(例如图像, 视频, 音频等)有关的内容。
物料箱
材料盒是Lightbox插件的材料设计实现。用户单击图像时, 图像将被放大。材质框使图像居中并以平滑, 无震颤的方式放大。如果要关闭图像, 则可以再次单击图像, 滚动鼠标或按ESC键。
的JavaScript
的JavaScript
<script>$(document).ready(function(){
$('.materialboxed').materialbox();
});</script>例子
让我们以一个示例来演示”材质”框中的媒体(图像)。
<!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.jquery.com/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>立即测试
输出
字幕
你可以轻松地为照片添加一个简短的标题。只需将标题添加为数据标题属性即可。
例子
<!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.jquery.com/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>立即测试
输出
滑杆
滑块是一个简单而优雅的图像轮播。你还可以根据自己的对齐方式选择字幕。你还可以在滑块底部显示指示器。
注意：这也与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.jquery.com/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>立即测试
输出
评论前必须登录！
注册