jQuery

【jQuery】ページをズームインまたはズームアウトできるようにjQuery Page Zoom

February 4, 2017
jQuery Page Zoom plugin

jQuery Page Zoomはリンクまたはボタン(onClickイベントを受け入れるもの)を使用して、ページを拡大または縮小できるようにします。

Usage

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="./javascript/js.cookie.js"></script>
<script type="text/javascript" src="./javascript/jquery.page_zoom.js"></script>
<ul>
    <li><a href="#" class="zoom_in">Zoom In</a></li>
    <li><a href="#" class="zoom_out">Zoom Out</a></li>
    <li><a href="#" class="zoom_reset">Reset Zoom</a></li>
</ul>
$(document).ready(function() {

    $.page_zoom();

});

Options

var options = {
    max_zoom: 1.5, // maximum amount you can zoom in. 1.5 = 150% zoom
    min_zoom: .5, // the minimum amount you can zoom out. .5 = 50% zoom
    zoom_increment: .1, // how much each click zooms in/out. So if the current zoom is 1.3, one click of the zoom out link means 1.3 - 0.1 = 1.2. New zoom level is 1.2
    current_zoom: 1, // default zoom. don't set this unless you want to force a zoom level on each page load
    selectors: {
        zoom_in: '.zoom_in', // the selector for the element(s) that will get the zoom in action for the onclick event
        zoom_out: '.zoom_out', // the selector for the element(s) that will get the zoom out action for the onclick event
        zoom_reset: '.zoom_reset' // the selector for the element(s) that will get the reset zoom action for the onclick event
    }
};

$.page_zoom(options);

MIT