最近经常看到园子里的同学提到jQuery(其实很早时就有同事把它用到项目中了),不小心又看到一篇文章里说到jQuery,随手点了里面的一个链接,进到了jQuery的UI的站,在里面随便看了几个demo,没吸引到我,这时,发现了一个叫Image Cropper的东东,因为很早前见到一个同事做项目的时候用过差不多的东西,那时候对我来说比较神奇,一直也没研究过,所以点了进去,竟然发现Demo不能用,我想,应该是Opera的问题吧,我换Firefox一看,晕了,还是不行,难道jQuery没做兼容么?只能在IE用?我又打开了IE,结果IE里也预览不了,唉,看来是我人品有问题了,3个浏览器都看不到他的Demo效果.
看这东西实现起来应该也不算难吧,自己写来玩玩?那就试试吧.说做就做,开始写,结果发现越写越不简单,写到后面,代码越来越多,看来这东西实现起来是有些麻烦,还是硬着头皮写完了,大家就自己看看效果吧,代码里有简单的注释,暂时没有经过严格的测试,问题肯定是有的,像我这样整天晕乎乎的人,没问题那就不正常了.
下面是3个简单的Demo.
调用时,除了第一个参数必须外,其它的两个可传可不传,直接new就好了,其它的什么css的都不要了,就为了调用简单些,所以代码写得麻烦了些.
调用参数说明:
new ImageCropper(el, option, callback);
el : element,要附加ImageCropper的img元素,必须.
option : {},接收一些设置参数,可为空,共有如下参数:
{Width : 拖动层的初始宽度,
Height : 拖动层的初始高度,
Left : 拖动层的初始Left,
Top : 拖动层的初始Top,
Locked : 是否锁定尺寸,
LockRate : 是否保持宽高比,
Rate : 高宽比}
callback : function,在尺寸和位置改变后,用于接收数据的方法,可为空,传递的数据x,y,w,h分别为Left,Top,Width,Height.
当然,在new ImageCropper()后再指定OnComplete也是可以的,只是有时候想把代码写在一行时就直接传个callback就可以了.
这个东东在IE中的效果可能会好些,因为IE中有个setCapture方法,其它浏览器中只要鼠标移出了当前拖动的Dom元素后拖动就会停止.
OK.就这么多了,再次感谢李战老师,虽然那悟透Javascript我啥都没悟到(因为我太笨了),但也还是找李老师学了点皮毛,哈哈.
附:Demo及源码下载 |