Materialise JS Media _MaterializeCSS

本文概述

物料箱
例子
字幕
滑杆

Materialize JS媒体组件指定与大型媒体对象(例如图像, 视频, 音频等)有关的内容。
物料箱材料盒是Lightbox插件的材料设计实现。用户单击图像时, 图像将被放大。材质框使图像居中并以平滑, 无震颤的方式放大。如果要关闭图像, 则可以再次单击图像, 滚动鼠标或按ESC键。
【Materialise JS Media】的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>

立即测试
输出