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遍历Json的两种数据结构的实现代码
Jan 19 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
angular 实时监听input框value值的变化触发函数方法
Aug 31 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
微信小程序加载机制及运行机制图解
Nov 27 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 Javascript
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
提高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 向访客和爬虫显示不同的内容
2009/11/09 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php实现对象克隆的方法
2015/06/20 PHP
php抓取网站图片并保存的实现方法
2015/10/29 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
window.print打印指定div指定网页指定区域的方法
2014/08/04 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
vue组件生命周期详解
2017/11/07 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
详解Vue源码学习之双向绑定
2019/04/10 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
js实现烟花特效
2020/03/02 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
Python切片知识解析
2016/03/06 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
python绘制漏斗图步骤详解
2019/03/04 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
eVitamins日本:在线购买折扣维生素、补品和草药
2019/04/04 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
C# Debug和Testing相关面试题
2015/10/25 面试题
社区学习十八大感想
2014/01/22 职场文书
人事助理自荐信
2014/02/02 职场文书
工伤调解协议书
2016/03/21 职场文书
导游词之桂林山水
2019/09/20 职场文书
python 制作一个gui界面的翻译工具
2021/05/14 Python
详解python网络进程
2021/06/15 Python