javascript淡入淡出效果的实现思路


Posted in Javascript onMarch 31, 2012

如题,只有思路,没有代码。

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

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

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

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

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

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

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

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

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

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

Javascript 相关文章推荐
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
Sep 03 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
js判断iframe中元素是否存在的实现代码
Dec 24 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
JavaScript生成图形验证码
Aug 24 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 #Javascript
一个关于javascript匿名函数的问题分析
Mar 30 #Javascript
JavaScript 基础篇(一)
Mar 30 #Javascript
js确定对象类型方法
Mar 30 #Javascript
js 浏览器事件介绍
Mar 30 #Javascript
js中eval详解
Mar 30 #Javascript
关于jquery性能最佳实践的讨论,与求教
Mar 30 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP设置一边执行一边输出结果的代码
2013/09/30 PHP
php时区转换转换函数
2014/01/07 PHP
typecho插件编写教程(五):核心代码
2015/05/28 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
javascript的函数
2007/01/31 Javascript
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JavaScript中string对象
2015/06/12 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
详解django模板与vue.js冲突问题
2019/07/07 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
Python爬虫实现网页信息抓取功能示例【URL与正则模块】
2017/05/18 Python
将python图片转为二进制文本的实例
2019/01/24 Python
利用python计算时间差(返回天数)
2019/09/07 Python
Python 从attribute到property详解
2020/03/05 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
使用 css3 transform 属性来变换背景图的方法
2019/05/07 HTML / CSS
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
圣彼得堡鲜花配送:Semicvetic
2020/09/15 全球购物
应届毕业生自我鉴定范文
2013/12/27 职场文书
学习党课思想汇报
2013/12/29 职场文书
村庄环境整治方案
2014/05/15 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
通讯稿范文
2015/07/22 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
详解MySQL的半同步
2021/04/22 MySQL
MySQL 如何设计统计数据表
2021/06/15 MySQL