首页 相关文章 jQuery 图像裁剪插件Jcrop的简单使用

jQuery 图像裁剪插件Jcrop的简单使用

同事推荐了Jcrop这个插件,到它的官方站点http://deepliquid.com/content/Jcrop.html下载了最新版的压缩包,压缩包中包括了Jcrop的几个demo文件,关键的Jcrop.js文件和jQuery.Jcrop.css文件。基本上来说参照它的几个demo文件就可以学会使用这个插件了。晚上正好学习研究了下,现简单总结如下,也方便下英文不好的朋友们。
使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件。
1.最基本使用方法
html代码部分:
代码如下:
img src="demo_files/flowers.gif" id="demoImage"/

js部分:
代码如下:
$(
function()
{
$("#demoImage").Jcrop();
}
);

这样就可以在图片上进行裁剪了。
2.得到选中区域的坐标以及回调函数
html代码部分如下:
[ 查看全文 ]

2016-02-19 标签:
  • 标签:Web开发
    必备的东西: Windows XP/Vista/7/2003/2008 Visual Studio 2005 or 2008 (download the correct version of Home Site project above) .NET Framework 2.0 and ASP.NET AJAX 1.0 今天,很多浏览器提供了使用tab的能力去浏览更多的网页和网站。当然这是一个非常有用的功能来替代同时打开几个浏览器,但如果提供在一个页面中浏览多个网页也非常的不错。 例如,如果你的主页是由很多不同的有用的Web工具...[ 查看全文 ]
  • 今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具: Jcrop演示 项目结构: 效果图: 这个很有用: 看到这些,大家也想自己试试吧 =========================================== 代码部分: =========================================== 准备工作: 下载: Jcrop-0.9.10 (zip format) 解压后放入到你的项目里面,就如上面的项目结构一样... /Jcrop/Web...[ 查看全文 ]
  • 标签:Web开发
    熟悉jquery的家伙大概花个5到10分钟就可以搞定了吧。由于这种导 航效果比较通用,LEVIN顺手写了个 jquery插件~ 如果你的网站也需要类似的效果,大可拿去直接用或者扩展下:) 如果你也想尝试将某些可重用功能封 装成jquery插件,别忘了看看一般的jquery插件开发过程,另外还有偶的一个jquery插件模板。 代码如下: ;(function($) { // Private functions. var p = {}; p.showC = function(opts) {...[ 查看全文 ]
  • 4月的资源合集够用么?这次的我们又为开发者和设计师单独做了一个jQuery的插件合集。有了这30款新鲜热辣的jQuery插件,你的设计与开发会如有神助!它们不仅会让让你速度更快,而且能使产品更加人性化更酷炫!jQuery插件越来越多,这并不奇怪,因为它们正在疯狂流行。于是,在挑选的时候,我们也容易陷入选择强迫症。为此,我们精心挑选了30款保质保量的优质jQuery插件。 1、Data Img 这是一款处理响应式...[ 查看全文 ]
  • 标签:Web开发
    用过新浪微博的朋友对它的头像编辑器都有印象吧.不过人家是用flash做的. 在一个项目中,也用到了同样的东西,本来想直接用新浪微博的,但它有一部分请求路径写到FLASH里面去了,所以只好放弃. 在网上找到了jquery.Jcrop,基本满足了我的需求,但它只是简单的切割而已,还有缩略图没有生成.或许有很多人都需要这类东西吧,于是我把它封装起来了,方便其它朋友直接使用. 上面有很多demo,有兴趣的可以上去看看. 此文...[ 查看全文 ]
  • 标签:Web开发
    HTML代码 代码如下: div class="tab" li class="selected" 1/li li class="hover"2/li li class="hover"3/li /div div class="tab_box" div class="newslist"第一个/div div class="newslist"第二个/div div class="newslist"第三个/div /div Jquery 代码如下: $().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'}); jquery.PPXT...[ 查看全文 ]
  • 在这篇文章中,我们将给大家介绍10个使用简单的、基于jQuery的拖放插件,能够帮助你方便快捷的添加拖放功能到你的网站中。 1.  Drag n Drop Scattered Gallery 支持不同外观的图片拖放插件脚本。   2.  ImgNavigator 一个使用拖放功能和导航图的图片浏览画廊。你可以通过拖放图片或者导航来查看图片。 3.  jQuery List DragSort 一个轻量级的jQuery插件,帮助你使用拖放方式来排...[ 查看全文 ]
  • 标签:Web开发
    和大家分享一下代码: JavaScript代码 代码如下: //得到select项的个数 jQuery.fn.size = function() { return jQuery(this).get(0).options.length; } //获得选中项的索引 jQuery.fn.getSelectedIndex = function() { return jQuery(this).get(0).selectedIndex; } //获得当前选中项的文本 jQuery.fn.getSelectedText = function() { if(this.size() == 0) { return "下拉框中无选项"; ...[ 查看全文 ]
  • 标签:Web开发
    简单使用方法: 代码如下: html head titleJQuery-Cookie插件/title script type="text/javascript" src="jquery-1.4.js"/script script type="text/javascript" src="jquery.cookie.js"/script /head body a href="#"设置cookie1/abr a href="#"设置cookie2/abr a href="#"获取cookie/abr a href="#"删除cookie/abr /body /html script type="text/javascript" $(function(){ var COOK...[ 查看全文 ]
  • 标签:Web开发
    打包下载   代码如下: /* Jquery 表单验证插件 janchie 2010.1 janchie@163.com 1.01版 */ (function($){ $.fn.extend({ valid:function(){ if( ! $(this).is("form") ) return; //获取参数 var items = $.isArray(arguments[0]) ? arguments[0] : [], isBindSubmit = typeof arguments[1] ==="boolean" ? arguments[1] :true, isAlert = typeof arguments[2] ==="boolean" ? argumen...[ 查看全文 ]
  • 标签:Web开发
    经常有人询问一些技巧,因此干脆写这么一篇文章给各位jQuery爱好者,算是抛砖引玉吧。 a)样式 很多人会认为样式是个很复杂的东西,需要沉着冷静的心态加上非凡的审美观才能设计出赏心悦目的UI,抛开图片设计不说,其实css也就是那么些属性:position,margin,padding,width,height,left,top,float,border,background... UI设计的漂亮与否在很大程度上依赖于设计人员对配色的把握和整体效果的协调。举...[ 查看全文 ]
  • 标签:Web开发
    什么是Uploadify Uploadify是JQuery的一个上传插件,支持多文件上传,实现的效果非常不错,带进度显示。 官网提供的是PHP的DEMO,在这里我详细介绍在Asp.net下的使用. 下载 官方下载 官方文档 官方演示   如何使用 1 创建Web项目,命名为JQueryUploadDemo,从官网上下载最新的版本解压后添加到项目中 2 在项目中添加UploadHandler...[ 查看全文 ]
  • 标签:Web开发
    海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在日志里面。 其中有些已经无法访问,或许是文件移除,或许是被封锁。大家分享的东西,没什么特别的可说的,唯有感谢无私分享的人们。 猫嗔提醒大家在使用的时候注意jQuery包的版本问题,最好是使用相同的版本,因为使用了高版本很有可能出现或多或少的问题。并且其中英文插件在转换成中文时注意编码,...[ 查看全文 ]
  • 标签:Web开发
    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码,就不难发现。 代码如下: jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... }; 原来 j...[ 查看全文 ]
  • 标签:Web开发
    概述 jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不 及的,它兼容 CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。 jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents、events、实现动画效果,并且方便地为网站提供 AJAX 交互。 jQuery 还...[ 查看全文 ]
  • 标签:Web开发
    例如 当前你的URL是: http://www.warting.com/index.php?test=1&kk=2 如果想获取test,则可以引入插件后, 用如下方法获取: var test = $.query.get('test'); 如果参数有多个相同的名称 ,则可以这样: var arr = $.query.get('testy'); 输出: [ 值1 , 值2, 值3...] 如果要获取多个相同名称中的某一个,可以这样: var arrayElement = $.query.get('testy[1]'); 此插件不仅能获取参数...[ 查看全文 ]
  • 标签:Web开发
    小序: 整理下自己项目中常用的几款jQuery插件, 发上来共享下, 另外作下说明, 由于自己大部分插件都是贡献在jQuery.com上的, 所以注释, demo 什么的基本上都是英文, 还请各位看官见谅. 正卷:   Facebook/Xiaonei 风格模态框 效果图: 简介: 使用 div, table 和 opacity 效果实现模态框效果... 导航: 详细介绍 | 在线演示 Tabpanel - jerichotab 效果图: 简介: jerichoTab是一款模拟 firefox 标签...[ 查看全文 ]
  • 标签:Web开发
    在WinForm程序开发中,经常用MessageBox弹出某些提示,功能虽简单但却非常的实用!而在Web页面中,浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口,如下图:        但是这些弹出来的窗口的样式非常的单调无法设置,并且窗口标题还根据不同的浏览器显示不同的标题内容,非常的丑陋!对于高审美观的现代人来说,就大打折扣了! jQuery现在这么流行、这么火,但网上却好...[ 查看全文 ]
  • 标签:Web开发
    jQuery 最好的地方在于其方便的插件机制了,而且网上有很多人在贡献有用的插件,但是插件太多,不熟悉的朋友选择起来可能会比较费事。我觉得有必要开此一贴,收集大家一些常用的好插件,最好稍作点评,以供他人参考。 我先列几个我常用的,请大家踊跃补充。此帖旨在抛砖引玉。 ifixpng: 用于修正 IE 6.0 不支持透明 PNG 图片的,很方便,可以用于 img/ 和 png 作为背景的元素,只要 $("选择器").i...[ 查看全文 ]
手机页面 收藏网站 回到头部