无为清净楼资源网 Design By www.qnjia.com
上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。
近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。
要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。
效果预览请看这里
完整实例下载
代码太多贴不出来,只好给个效果图:
JavaScript 图片切割效果(放大镜)第1/4页
程序说明

这个效果主要分三个部分:层的拖放、层的缩放、图片切割(包括预览)。
其中 层的拖放 和 层的缩放 我已经在其他两篇文章中有详细说明,这里就说说图片切割这部分吧。

图片切割

关于图片切割的设计,有三个方法:

把图片设为背景图,通过设置背景图的位置来实现,但这样的缺点是只能按图片的正常比例实现,不够灵活;
把图片放到切割对象里面,通过设置图片的top和left实现,这个方法是可行,但下面有更简单的方法实现;
通过设置图片的clip来实现。
这里介绍方法3的实现方法,这个方法是从当年“珍藏”的代码中看到的,先说说clip:
clip的作用是“检索或设置对象的可视区域。可视区域外的部分是透明的。”
依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值来剪切。
例如:
复制代码 代码如下:
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }

注意position:absolute的设置是必须的(详细看手册)。
下面说说具体实现原理:

首先需要一个容器(_Container),容器里面会插入三个层:

底图层(_layBase):那个半透明的图片;
切割层(_layCropper):正常显示的那个部分;
控制层(_layHandle):就是控制显示的那个部分。
其中为了底图层和切割层是程序自动创建的图片,控制层是自己定义的层(程序中是一个div)。
底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角:
复制代码 代码如下:
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;

层叠顺序也要设置一下保证各层顺序。
1234下一页阅读全文
标签:
JavaScript,图片切割,放大镜

无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。