当前位置:Gxlcms > JavaScript > Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能

时间:2021-07-01 10:21:17 帮助过:19人阅读

先给大家展示效果图:

点击查看效果图           源码下载

jQuery可调节放大与缩小功能的全屏相册插件zoomVisualizer。

文件引用:

  1. <script src="js/jquery.min.js"></script>
  2. <script src="js/jquery-ui.min.js"></script>
  3. <script type="text/javascript" src="js/ZoomVisualizer.js"></script>
  4. <script type="text/javascript">
  5. jQuery(document).ready(function() {
  6. $(window).ZoomVisualizer({
  7. added: added,
  8. removed: removed,
  9. object: '#zoom-visualizer',
  10. resizeInitial: true,
  11. centerThumbs: true,
  12. loader: "img/ajax-loader-overlay.gif",
  13. sliderOrientation: "vertical",
  14. positionZoom: {
  15. left: 10,
  16. right: 10,
  17. top:10,
  18. bottom:10
  19. }
  20. });
  21. function added() {
  22. console.log("相册打开了!");
  23. }
  24. function removed() {
  25. console.log("相册关闭了!");
  26. }
  27. });
  28. </script>

人气教程排行