实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
5
        <link rel="stylesheet" href="//ku.shouce.ren/libs/jcrop/css/jquery.Jcrop.css">
6
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
7
        </script>
8
        <script src="//ku.shouce.ren/libs/jcrop/js/jquery.Jcrop.min.js">
9
        </script>
10
    </head>
11
    <body>
12
        <div class="main">
13
            <div class="inwrap">
14
                <h1>jQuery Jcrop 图像裁剪插件
15
                </h1>
16
                <h2>Hello World 基础示例
17
                </h2>
18
                <div class="detail">
19
                    <p>这个示例演示了 Jcrop 的默认效果
20
                    </p>
21
                    <p>由于没有其他的事件，它只是简单的在图像上画裁剪框，并不能处理什么。
22
                    </p>
23
                </div>
24
                <div class="example">
25
                    <img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" id="target" alt="[Jcrop Example]">
26
                </div>
27
            </div>
28
        </div>
29
        <script>
30
            jQuery(function($){
31
                // How easy is this??
32
                $('#target').Jcrop();
33
            }
34
                  );
35
        </script>
36
    </body>
37
</html>
38
​