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 相关文章推荐
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
JavaScript制作的可折叠弹出式菜单示例
Apr 04 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
Bootstrap缩略图与警告框学习使用
Feb 08 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
Feb 21 Javascript
javascript 中的继承实例详解
May 05 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 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文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP巧妙利用位运算实现网站权限管理的方法
2017/03/12 PHP
php数据序列化测试实例详解
2017/08/12 PHP
js调用flash的效果代码
2008/04/26 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
实现高性能JavaScript之执行与加载
2016/01/30 Javascript
浅谈Vue网络请求之interceptors实际应用
2018/02/28 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
js数组的基本使用总结
2021/01/18 Javascript
Python中的字典遍历备忘
2015/01/17 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
基于python实现名片管理系统
2018/11/30 Python
Django中信号signals的简单使用方法
2019/07/04 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
Python中*args和**kwargs的区别详解
2019/09/17 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Python2与Python3的区别点整理
2019/12/12 Python
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
构造方法和其他方法的区别
2016/04/26 面试题
教师个人的自我评价分享
2014/01/02 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
重阳节标语大全
2014/10/07 职场文书
超市督导岗位职责
2015/04/10 职场文书
庆七一晚会主持词
2015/06/30 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python