Intense Images 全屏浏览图像的 JS 插件

发布于 2020-05-08 21:20:18 字数 1635 浏览 1675 评论 0

Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像。使用触摸/鼠标来实现图片位置的平移。图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和字幕的制作。

使用方法

该超大图片展示插件没有任何外部依赖,使用时仅需引入 intense.js 文件即可。

<script src='js/intense.js'></script>

HTML 结构

该 js 插件的 HTML 结构非常简单。位移一个强制性的属性是 src 或一个 data-image 属性。他们都用于指向一个图片文件。

<img src="./img/awesome-source.jpg" />
<!-- OR -->
<div class="anything" data-image="./img/awesome-source.jpg" />

你也可以传入图片的标题和描述文本,它们会被显示在屏幕的左下角位置。图片标题使用 data-title 属性,图片描述使用 data-caption 属性。

<img src="./img/awesome-source.jpg" data-title="图片标题" data-caption="图片描述信息"/>

初始化插件

你可以使用 document.querySelector()方法来获取你要全屏显示的图片,然后将它作为参数传入到 Intense()方法中。

<img src="./img/awesome-source.jpg" />
<script>
window.onload = function() {
  // 获取页面中所有的图片
  var element = document.querySelector( 'img' );
  Intense( element );
}
</script>

或者也可以通过 CSS 名称来选择多个图片。

<img src="./img/awesome-source.jpg" class="intense" />
<img src="./img/awesome-source.jpg" class="intense" />
<script>
window.onload = function() {
  // 选择所有class名称为intense的图片
  var elements = document.querySelectorAll( '.intense' );
  Intense( elements );
}
</script>

相关链接

npm 地址:https://www.npmjs.com/package/intense-images

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。