码迷,mamicode.com
首页 > 编程语言 > 详细

Javascrip 淡入淡出思路

时间:2016-12-08 02:53:24      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:设置   图片切换   实现   操作   dex   javascrip   透明度   图片   分析   

这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了
 
如题,只有思路,没有代码。 

这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。 

比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。 

我们来列一个简单的步骤: 

当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10. 
当前图透明度80%,下张图透明度20% 
当前图70%,下张图30%。 
。。。。 
当前图10%,下张图90% 
完成切换 
其实,这样做完全是一种浪费! 

我们想一想,如果下张图zIndex位于当前图之上,当它渐显的时候,因为越来越不透明,所以视觉上,他下层的当前图片看起来就越来越透明! 

比如,下张图透明度为20%的时候,因为他覆盖在当前图上,所以当前图片看起来透明度就是100%-20%=80%! 

所以,在制作淡入淡出切换效果的时候,其实只需要淡入效果即可,淡入的同时,淡出就发生着;淡入结束时,就是淡出终结。这样一来,永远不用担心淡入与淡出不同步的问题。 

关键是,这样一来只用同时循环设置一张图片的透明度(即下张图),不用管被挡住的这张(即当前图),节约了一半的运算。这也算是优化了javascript的执行效率吧? 

所以,我实现淡入淡出切换效果的思路就是: 

将下一张图片的zIndex设置于当前图片之上 
下一张图片进行淡入(渐显)循环;当前图片不操作。 
淡入进行时,淡出同步发生;淡入完成,淡出同时完成。 
注:此思路只适合于当前图与下一张图重叠的情况(大部分时候都是这样)。
注:转载自 脚本之家 作者不明

Javascrip 淡入淡出思路

标签:设置   图片切换   实现   操作   dex   javascrip   透明度   图片   分析   

原文地址:http://www.cnblogs.com/nanxi-zwj/p/6143257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!