intense-images是一款非常实用的超大图片全屏动态展示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>
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!