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 相关文章推荐
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
UI Events 用户界面事件
Jun 27 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
Javascript浅谈之this
Dec 17 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
node.js中的fs.closeSync方法使用说明
Dec 17 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
Cocos2d实现刮刮卡效果
Dec 20 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
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JavaScript中prototype为对象添加属性的误区介绍
2013/10/15 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
Javascript Function.prototype.bind详细分析
2016/12/29 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
[00:26]TI7不朽珍藏III——冥界亚龙不朽展示
2017/07/15 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python实现识别手写数字 Python图片读入与处理
2020/03/23 Python
python实现简易内存监控
2018/06/21 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python 如何对logging日志封装
2020/12/02 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
大学毕业生通用自我评价
2014/01/05 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
检察院起诉书
2015/05/20 职场文书
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python