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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
jquery日历插件datepicker用法分析
Jan 22 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
Angular2中监听数据更新的方法
Aug 31 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
Oct 08 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
收集的一些Array及String原型对象的扩展实现代码
2010/12/05 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
JS打开新窗口防止被浏览器阻止的方法
2015/01/03 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
学JavaScript七大注意事项【必看】
2016/05/04 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python实现的爬虫功能代码
2017/06/24 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
Python析构函数__del__定义原理解析
2020/11/20 Python
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
软件测试工程师面试问题精选
2016/10/28 面试题
机电一体化求职信
2014/03/10 职场文书
七一建党节演讲稿
2014/09/11 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书