jquery实现的图片裁剪插件

1、准备好需要用到的图片。

2、新建html文档。

3、书写hmtl代码。

<div id="outer">

  <div class="jcExample">

    <div class="article">

      <h1>jquery实现的图片裁剪插件</h1>

      <big> <b>jquery实现的图片裁剪插件</b> </big>

      <h3>Static Demos</h3>

      <h3>Live Demo</h3>

    </div>

  </div>

</div>

4、书写css代码。

body { margin: 0; padding: 0; background: #eee; font-family: Calibri, sans-serif; }

.article h1 { color: #333; font-size: 2.2em; margin-top: .2em; }

.jcropper-holder { border: 1px black solid; }

#outer { text-align: center; }

.jcExample { text-align: left; background: white; width: 700px; font-size: 80%; margin: 1.5em auto 2em auto; border: 1px #999 solid; padding: 1em 2em 2em; }

.jcExample .article { width: 565px; }

form { margin: 1.5em 0; }

form.coords label { margin-right: 1em; font-weight: bold; color: #900; }

form.coords input { width: 3em; }

.ui-button { font-size: 10pt; }

.ui-dialog { font-size: 9pt; }

.ui-state-default { font-size: 9pt; }

.ui-widget-overlay { opacity: 0.80; filter: Alpha(opacity=70); }

.jc-dialog { padding-top: 1em; }

.ui-dialog p tt { color: yellow; }

li small { font-style: normal; color: #CF4429; font-size: 11px; }

.jcrop-light .jcrop-selection { -moz-box-shadow: 0px 0px 15px #999; /* Firefox */ -we   bkit-box-shadow: 0px 0px 15px #999; /* Safari, Chrome */ box-shadow: 0px 0px 15px #999; /* CSS3 */ }

.jcrop-dark .jcrop-selection { -moz-box-shadow: 0px 0px 15px #000; /* Firefox */ -we   bkit-box-shadow: 0px 0px 15px #000; /* Safari, Chrome */ box-shadow: 0px 0px 15px #000; /* CSS3 */ }

.jcrop-fancy .jcrop-handle.ord-e { -we   bkit-border-top-left-radius: 0px; -we   bkit-border-bottom-left-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-w { -we   bkit-border-top-right-radius: 0px; -we   bkit-border-bottom-right-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-nw { -we   bkit-border-bottom-right-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-ne { -we   bkit-border-bottom-left-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-sw { -we   bkit-border-top-right-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-se { -we   bkit-border-top-left-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-s { -we   bkit-border-top-left-radius: 0px; -we   bkit-border-top-right-radius: 0px; }

.jcrop-fancy .jcrop-handle.ord-n { -we   bkit-border-bottom-left-radius: 0px; -we   bkit-border-bottom-right-radius: 0px; }

5、代码整体结构。

6、查看效果。