JavaScript教程:图片切割效果

2016-02-20 00:52 65 1 收藏

今天图老师小编给大家介绍下JavaScript教程:图片切割效果,平时喜欢JavaScript教程:图片切割效果的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

自上一个版本的图片切割效果出来后,虽然也经常看到框架开发这个如何如何容易之类的评论,但也受到很多人的肯定,小弟在此感谢大家的支持。
上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。
近来我把其中的 拖放效果 和 缩放效果 单独出来研究,经过整理和完善,再套进切割效果,个人感觉效果已经不错了。
要说明的是这个只是一个效果,并不是真正的切割图片,要获取真正的切割图片请参考 图片切割系统 。

效果预览请看这里

完整实例下载

代码太多贴不出来,只好给个效果图:

程序说明

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

图片切割

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

把图片设为背景图,通过设置背景图的位置来实现,但这样的缺点是只能按图片的正常比例实现,不够灵活; 把图片放到切割对象里面,通过设置图片的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)。
底图层和切割层必须完全重合,程序中把这两个层都绝对定位到了左上角:

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

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

来源:http://www.tulaoshi.com/n/20160220/1632702.html

延伸阅读
标签: Web开发
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
标签: Web开发
有时你可以会在一些网站看到一些变化显示的图片,这除了可以利用Flash来制作之外,当然也可以利用本节教程介绍的方法来实现哦。好吧,就开始我们的创作吧。我们可以在网页的最前面部分添加以下的代码来创建一个随机的数字: SCRIPT !-- // Randomizer rnd.today=new Date(); rnd.seed=rnd.today.getTime(); function rnd() { rnd.seed ...
标签: Web开发
本来想做一个集合浮动定位和鼠标跟随的tooltips效果,但发现定位和鼠标跟随在一些关键的地方还是不同的,还是分开来吧。 这个效果本身难度不大,主要在程序结构和扩展中下了些功夫,务求用起来更方便,能用在更多的地方。 程序特点 同一个提示框用在多个触发元素时,只需一个实例; 显示和隐藏分别有点击方式和触发方式选择; 能设置...
标签: Web开发
缓动,学名为Tween,缓冲移动的简称。要想页面内容切换起来舒服,就使用淡入淡出特效,要想让页面元素动起来自然,就要使用缓动效果。这两个混合起来,可以衍生多种特效的。感谢Flash开发人员为我们做了那么多先行研究,我们直接把它们拆出来装在各种菜单与相册中。我们先从最简单的东西做起,加速与减速。 既然是缓动,它就一定涉及以下概...
标签: Web开发
函数为程序设计人员提供了一个非常方便的能力。通常在进行一个复杂的程序设计时,总是根据所要完成的功能,将程序划分为一些相对独立的部分,每部分编写一个函数。从而,使各部分充分独立,任务单一,程序清晰,易懂、易读、易维护。JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现...

经验教程

352

收藏

90
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部