xximg
/
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xximg</title>
    <link href="css/style.css" rel="stylesheet">
    <style>
        img {
            display: block;
        }

        .xximg {
            opacity: 0;
            /*vertical-align: middle;*/
        }
    </style>
</head>
<body>

<div style="margin: 30px;">
    <a href="https://gitee.com/gx1727/xximg">源码</a>
    <a href="http://www.gx1727.com/static/xximg/index.html">DEMO1</a>
    <a href="http://www.gx1727.com/static/xximg/demo3.html">DEMO3</a>
</div>
<div>
    <div style="width: 30%;float: left;">
        <div style="width:70%;background-color: #fff;margin: 10px;">
            <img src="img/1.jpg" style="width:100%;"/>
        </div>
        (模版：1680*1050)
        <a href="javascript:void(0);" id="refresh_1">显示这张图</a>
        <div style="width:70%;background-color: #fff;margin: 10px;">
            <img src="img/2.jpg" style="width:100%;"/>
        </div>
        (竖版：800*1280)
        <a href="javascript:void(0);" id="refresh_2">显示这张图</a>
    </div>
    <div style="width: 70%; float:right;" id="img_area">
        <div>
            <div style="width:200px;height:200px;margin: 10px;float: left;">
                <img src="img/1.jpg" style="width: 100%;" class="xximg" _xx_height="200" _xx_mod="elastic">
            </div>
            <div style="margin-left: 240px;">
                留旁白
                <div>目标尺寸:200*200</div>
            </div>

        </div>
        <div style="clear: both"></div>
        <div>
            <div style="width:200px;height:100px;margin: 10px;float: left;">
                <img src="img/1.jpg" style="width: 100%;" class="xximg" _xx_height="100" _xx_mod="elastic">
            </div>
            <div style="margin-left: 240px;">
                留旁白
                <div>目标尺寸:200*100</div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div>
            <div style="width:100px;height:200px;margin: 10px;float: left;">
                <img src="img/1.jpg" style="width: 100%;" class="xximg" _xx_height="200" _xx_mod="elastic">
            </div>
            <div style="margin-left: 240px;">
                留旁白
                <div>目标尺寸:100*200</div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div>
            <div style="width:200px;height:200px;margin: 10px;float: left;">
                <img src="img/1.jpg" style="width: 100%;" class="xximg cutting-demo" _xx_width="200" _xx_height="200" _xx_mod="cutting" _xx_pos="0.5">
            </div>
            <div style="margin-left: 240px;">
                裁切
                <div>目标尺寸:200*200</div>
                <div style="display: inline-table;height: 40px;">偏移：
                    <button id="cutting_minus" style="height: 36px; width: 36px;">-</button>
                    <input id="cutting_pos" style="text-align: center;height: 30px;width: 50px;" value="0.5">
                    <button id="cutting_add" style="height: 36px;width: 36px;">+</button>
                </div>
            </div>
        </div>
        <div style="clear: both"></div>
    </div>
    <div style="clear: both"></div>
</div>

<br/>
<div style="clear: both "></div>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/xximg.js"></script>
<script>
    $(function () {
        $('.xximg').xximg();

        $('#refresh_1').click(function () {
            $('.xximg').xximg('refresh', {src: 'img/1.jpg'});
        })
        $('#refresh_2').click(function () {
            $('.xximg').xximg('refresh', {src: 'img/2.jpg'});
        })

        $("#cutting_minus").click(function () {
            var pos = parseFloat($("#cutting_pos").val());

            if (pos > 0.0) {
                pos -= 0.05;
            }
            pos = pos.toFixed(2);
            $("#cutting_pos").val(pos);

            $(".cutting-demo").xximg('refresh', {pos: parseFloat(pos), src: $(".cutting-demo").attr('original_src')});
        })

        $("#cutting_add").click(function () {
            var pos = parseFloat($("#cutting_pos").val());
            // /  $(".cutting-demo").attr('src', $(".cutting-demo").attr('original_src'));
            if (pos < 1.0) {
                pos += 0.05;
            }
            pos = pos.toFixed(2);

            $("#cutting_pos").val(pos);

            $(".cutting-demo").xximg('refresh', {pos: parseFloat(pos), src: $(".cutting-demo").attr('original_src')});
        })
    })
</script>
</body>
</html>