jQuery很棒的截图插件——Jcrop

作者:人气:来源:2015-03-23

广告载入中...

jQuery插件总是能让我们眼前一亮的感觉,同时也让我们体会到jQuery的强大和神奇!jQuery真的无所不能吗?

本文为大家推荐一款不错的jQuery截图插件,在这里感谢Q群里的同学分享!效果图预览:

Jcrop官网:http://deepliquid.com/content/Jcrop_Download.html

截止本文最新版本:Jcrop-0.9.10

官网在线示例:http://deepliquid.com/projects/Jcrop/demos.php

Github托管地址:https://github.com/tapmodo/Jcrop

简单的完整示例源码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 
    <title>Jcrop » Tutorials » Hello World</title>
    <script src="../js/jquery.min.js" type="text/javascript"></script>
    <script src="../js/jquery.Jcrop.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
    <link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
    <script type="text/javascript">

    jQuery(function($){

      // How easy is this??
      $('#target').Jcrop();

    });

    </script>
  </head>

  <body>
    <div id="outer">
    <div class="jcExample">
    <div class="article">

      <h1>Jcrop - Hello World</h1>
      <img src="demo_files/pool.jpg" id="target" alt="Flowers" />

      <p>
        <b>This example demonstrates the default behavior of Jcrop.</b>
        Since no event handlers have been attached it only performs
        the cropping behavior.
      </p>

    </div>
    </div>
    </div>
  </body>
</html>

继续阅读:页面特效

分享吧:

手机移动