js大屏导出图片_超大图片全屏动态展示js插件

intense-images是一款非常实用的超大图片全屏动态展示js插件。该图片查看插件可以全屏显示超大图片,可以使用鼠标来和图片进行交互,上下左右移动鼠标会相应的移动图片,对于超大图片的展示是非常好的用户体验。

使用方法

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

HTML结构

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

awesome-source.jpg

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

awesome-source.jpg

data-caption="图片描述信息"/>

初始化插件

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

awesome-source.jpg

window.onload = function() {

// 获取页面中所有的图片

var element = document.querySelector( 'img' );

Intense( element );

}

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

awesome-source.jpg

awesome-source.jpg

window.onload = function() {

// 选择所有class名称为intense的图片

var elements = document.querySelectorAll( '.intense' );

Intense( elements );

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值