javascript淡入淡出效果的实现思路
JavaScript思路 实现 效果 淡入淡出
2023-06-13 09:14:33 时间
如题,只有思路,没有代码。
这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。
比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。
我们来列一个简单的步骤:
当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10.
当前图透明度80%,下张图透明度20%
当前图70%,下张图30%。
。。。。
当前图10%,下张图90%
完成切换
其实,这样做完全是一种浪费!
我们想一想,如果下张图zIndex位于当前图之上,当它渐显的时候,因为越来越不透明,所以视觉上,他下层的当前图片看起来就越来越透明!
比如,下张图透明度为20%的时候,因为他覆盖在当前图上,所以当前图片看起来透明度就是100%-20%=80%!
所以,在制作淡入淡出切换效果的时候,其实只需要淡入效果即可,淡入的同时,淡出就发生着;淡入结束时,就是淡出终结。这样一来,永远不用担心淡入与淡出不同步的问题。
关键是,这样一来只用同时循环设置一张图片的透明度(即下张图),不用管被挡住的这张(即当前图),节约了一半的运算。这也算是优化了javascript的执行效率吧?
所以,我实现淡入淡出切换效果的思路就是:
将下一张图片的zIndex设置于当前图片之上
下一张图片进行淡入(渐显)循环;当前图片不操作。
淡入进行时,淡出同步发生;淡入完成,淡出同时完成。
注:此思路只适合于当前图与下一张图重叠的情况(大部分时候都是这样)。
这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了。不过经过分析,我觉得其实只需要一半就行了。
比如写一个图片切换类,切换效果是淡入淡出,通常我们会这样写:当切换发生的时候,当前显示的图片淡出(渐渐隐藏),将要显示的图片淡入(渐渐出现),通常两张图片的动画速度是一致的,以便实现当前图片完全隐藏之时就是下一张图片完全显示之日。
我们来列一个简单的步骤:
当前图片渐隐,透明度由100%变成90%;同时下一张图片渐显,透明度由0变成10.
当前图透明度80%,下张图透明度20%
当前图70%,下张图30%。
。。。。
当前图10%,下张图90%
完成切换
其实,这样做完全是一种浪费!
我们想一想,如果下张图zIndex位于当前图之上,当它渐显的时候,因为越来越不透明,所以视觉上,他下层的当前图片看起来就越来越透明!
比如,下张图透明度为20%的时候,因为他覆盖在当前图上,所以当前图片看起来透明度就是100%-20%=80%!
所以,在制作淡入淡出切换效果的时候,其实只需要淡入效果即可,淡入的同时,淡出就发生着;淡入结束时,就是淡出终结。这样一来,永远不用担心淡入与淡出不同步的问题。
关键是,这样一来只用同时循环设置一张图片的透明度(即下张图),不用管被挡住的这张(即当前图),节约了一半的运算。这也算是优化了javascript的执行效率吧?
所以,我实现淡入淡出切换效果的思路就是:
将下一张图片的zIndex设置于当前图片之上
下一张图片进行淡入(渐显)循环;当前图片不操作。
淡入进行时,淡出同步发生;淡入完成,淡出同时完成。
注:此思路只适合于当前图与下一张图重叠的情况(大部分时候都是这样)。
相关文章
- javascript 基础_JavaScript高级编程
- Javascript原型链您了解多少
- Vue项目打包报错:JavaScript heap out of memory
- JavaScript笔记
- JavaScript学习总结(二十)——Javascript非构造函数的继承详解编程语言
- JavaScript学习总结(九)——Javascript面向(基于)对象编程详解编程语言
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- javascript学习之旅(1)
- Javascript阻止javascript事件冒泡,获取控件ID值
- JavaScript设计模式富有表现力的Javascript(一)
- 深入理解JavaScript定时机制
- JavaScript产生不重复的随机数三种实现思路
- FileUpload使用Javascript检查扩展名是否有效实现思路
- javascript自适应宽度的瀑布流实现思路
- JavaScript建立一个语法高亮输入框实现思路
- JavaScript将Table导出到Excel实现思路及代码
- javascript解决innerText浏览器兼容问题思路代码
- javascript-简单的计算器实现步骤分解(附图)
- javascript阻止scroll事件多次执行的思路及实现
- javascript判断整数方法分享
- Javascript基础教程之JavaScript语法