源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JavaScript 图片切割效果(放大镜)第1/4页

  • 时间:2022-04-06 16:18 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JavaScript 图片切割效果(放大镜)第1/4页
上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。 近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。 要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。 [url=http://img.jb51.net/online/picqg/ImgCropper.htm]效果预览请看这里[/url] [url=http://img.jb51.net/online/picqg/picqg.rar]完整实例下载 [/url] 代码太多贴不出来,只好给个效果图: [img]http://files.jb51.net/upload/20081210172235425.gif[/img] 程序说明 这个效果主要分三个部分:层的拖放、层的缩放、图片切割(包括预览)。 其中 层的拖放 和 层的缩放 我已经在其他两篇文章中有详细说明,这里就说说图片切割这部分吧。 图片切割 关于图片切割的设计,有三个方法: 把图片设为背景图,通过设置背景图的位置来实现,但这样的缺点是只能按图片的正常比例实现,不够灵活; 把图片放到切割对象里面,通过设置图片的top和left实现,这个方法是可行,但下面有更简单的方法实现; 通过设置图片的clip来实现。 这里介绍方法3的实现方法,这个方法是从当年“珍藏”的代码中看到的,先说说clip: clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。” 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。 例如:
[url=http://www.1sucai.cn/article/16774_2.htm]2[/url][url=http://www.1sucai.cn/article/16774_3.htm]3[/url][url=http://www.1sucai.cn/article/16774_4.htm]4[/url][url=http://www.1sucai.cn/article/16774_2.htm]下一页[/url][url=http://www.1sucai.cn/article/16774_all.htm]阅读全文[/url]
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部