插件描述：Intense Images是一个独立的javascript库用于查看全屏下超出屏幕大小的图片。使用触摸/鼠标位置的平移或垂直移动。
一个独立的javascript库全屏查看完整图片。使用触摸/鼠标位置的平移。这是一个演示!
HTML
1 2 3 | <img src="./img/awesome-source.jpg" /><!-- OR --><div class="anything" data-image="./img/awesome-source.jpg" /> |
你也可以通过标题、subcaptions,将出现在观众的右下方。要做到这一点,您可以使用data-title和data-caption属性。
1 | <img src="./img/awesome-source.jpg" data-title="My beach adventure" data-caption="Thanks Sam, for the great picture"/> |
JS
1 | <img src="./img/awesome-source.jpg" /> |
1 2 3 4 5 6 7 | <script>window.onload = function() { // Intensify all images on the page. var element = document.querySelector( 'img' ); Intense( element );}</script> |
或做多一次,一个类名
1 2 | <img src="./img/awesome-source.jpg" class="intense" /><img src="./img/awesome-source.jpg" class="intense" /> |
1 2 3 4 5 6 7 | <script>window.onload = function() { // Intensify all images with the 'intense' classname. var elements = document.querySelectorAll( '.intense' ); Intense( elements );}</script> |
CSS
如果你想使用自己的指针图标,你可以在演示文件夹替换，或修改这里的CSS代码。
1 2 3 | .your-image-class { cursor: url('./you-image-directory/plus_cursor.png') 25 25, auto;} |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： gifffer-防止自动播放gif动画
- 下一个特效： jQuery标签插件flyLabel.js