放大/缩小整个页面 jQuery页面缩放

  • 源码大小:8.56KB
  • 所需积分:1积分
  • 源码编号:19JP-3249
  • 浏览次数:1047次
  • 最后更新:2023年05月22日
  • 所属栏目:缩放
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

Page Zoom是一个易于使用的jQuery插件,它使访问者能够放大和缩小整个页面,而不仅仅是一个特定的元素,以提高网站的可访问性。类似于浏览器的内置缩放功能,但更具可定制性。

有了这个插件,你的用户可以很容易地放大页面的特定部分,或者缩小以查看整个页面。这对于有视觉障碍的用户或喜欢查看较大尺寸网页的用户来说很有用。

如何使用它:

1.在jQuery之后加载页面缩放插件的缩小版。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/jquery.page_zoom.min.js"></script>

2.加载js cookie插件,将当前缩放级别保存在cookie中。可选。

  1. <script src="/path/to/cdn/js.cookie.min.js"></script>

3.创建页面缩放控件以增加、减少或重置页面放大倍数。

  1. <!-- Zoom In -->
  2. <a href="#" class="zoom_in">Zoom In</a>
  3.  
  4. <!-- Zoom Out -->
  5. <a href="#" class="zoom_out">Zoom Out</a>
  6.  
  7. <!-- Reset -->
  8. <a href="#" class="zoom_reset">Reset Zoom</a>

4.初始化页面缩放插件并完成。

  1. jQuery(document).ready(function($) {
  2. $.page_zoom();
  3. });

5.覆盖缩放控件的默认选择器。

  1. $.page_zoom({
  2. selectors: {
  3. zoom_in: '.zoom_in',
  4. zoom_out: '.zoom_out',
  5. zoom_reset: '.zoom_reset'
  6. }
  7. });

6.设置最小/最大缩放级别。

  1. $.page_zoom({
  2. max_zoom: 1.5,
  3. min_zoom: .5,
  4. current_zoom: 1,
  5. });

7.自定义缩放增量。

  1. $.page_zoom({
  2. zoom_increment: .1,
  3. });

预览截图