Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript 图片切割效果(放大镜)

PHP中文网
Freigeben: 2016-05-16 18:57:42
Original
1010 Leute haben es durchsucht

上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。
近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。
要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。

代码太多贴不出来,只好给个效果图:
JavaScript 图片切割效果(放大镜)
程序说明

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

图片切割

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

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

复制代码 代码如下:


p { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }


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

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

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

复制代码 代码如下:


this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;


层叠顺序也要设置一下保证各层顺序。


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage