Jquery+ASP.NET 实现上传头像剪裁功能

所属类别:普通下载    浏览数量:3128    发布时间:2011/5/14 23:04:30

前台:需要引用Jquery的类库和两个Ui的Js

<script type="text/javascript" src="js/jquery1.2.6.pack.js"></script>
  <script  type="text/javascript" src="js/ui.core.packed.js" ></script>
  <script type="text/javascript" src="js/ui.draggable.packed.js" ></script>

html太长就不全贴出来了,挑几个重点来说把:




 1:这个我们的html片段

image

2:这个是开心网中的html片段

image

开心网中用一个table作为画布的架子,中间的一个td设置样式为选取框,把img移到table下面,就可以看到上图的效果了,但是在设置drap的时候handler设置为table(id=crop),来看下下面开心网的代码就知道了。

image

因为我们点击的时候,因为table在img之上,所以点击只能点到table。但是Jquery的drap handle不能设置源以外的元素,所以上面的方法就行不通了,参考了原文中的做法,用两个图片代替,一个做成蒙层的效果(ImageDragContainer),一个缩小放到中间的位置,变成剪切窗口(IconContainer),只要控制好两个图片的left,top,width,height,那么可以做到看上去像一个图片那样。如前面的效果所示。

代码太长我就不贴出来了,直接下载源代码吧!

文件类型:RAR
文件大小:107 KB
下载次数:1089

0 条评论

显示评论列表
发表评论
用户昵称:
 
评价等级:
1 2 3 4 5  
评论内容:
 
验证码:
点击切换验证码 看不清楚?

下载类别

推荐下载