软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 源码下载 > 脚本资源 > jQuery > jQuery实现QQ头像裁剪功能实例下载

jQuery实现QQ头像裁剪功能实例

  • 资源语言:简体中文
  • 资源类型:国产软件
  • 资源大小:161 KB
  • 资源等级:3星级
  • 相关链接:Home Page
  • 资源性质:免费版
运行环境:php/asp/html/asp.net/jsp...
更新时间:2014-09-15 08:56:26
有无插件:无插件,请您放心使用!

说到QQ头像上传大家并不陌生,您可以将一张大的图片上传并裁剪、拖放等操作进行编辑,从而实现自己想要的头像效果!而本次提供的为jQuery网页版图片裁剪的效果,本例主要是通过css的clip来裁剪图片可视区域,拖动剪裁窗口这里使用了JQ-UI的draggable插件(但是缩放没有,贪方便可以使用Resizable插件,但都用插件的话就没有研究的意义了)。

缩放功能原理其实很简单,不外乎获取剪裁框的offset()或position(),以及各容器宽高、鼠标位置,然后做个大杂侩计算。

只能说咱做前端的必须要认真耐心地去做计算,虽然过程颇为麻烦,但绝对不是“做不出来”。有的朋友在做某些功能前,可能会因为需要涉及较麻烦的计算就放弃,这是不靠谱的做法。

P.S.:像效果图中会存在图片被选中(变蓝色)的情况,是因为本章直接用的img,如果不喜欢这种图片被选中的情况,可以用一个div直接设置背景替换img即可(不过这里得使用background-size:100% 100%,如果不考虑IE8-的话,利用这种方法交互视觉上感觉会更好些)

jQuery实现QQ头像裁剪功能实例

 报告下载错误
点击链接开始下载
本类最新
相关教程
下载说明
栏目导航
推荐软件