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

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

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

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

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

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

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

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

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

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

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

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

赞 (0)

相关推荐

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/100(兼容FF和GG). 先来看看设置透明度的兼容性代码: 复制代码 代码如下: function setOpacity(ele, opacity) { if (ele.style.opacity != undefined) { ///兼容FF和GG和新版本IE ele.style.opacity = opac

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • css图片切换效果代码[不用js]

    css图片切换效果代码[不用js]

    纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • js控制淡入淡出示例代码

    相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.o

  • 简单的实现点击箭头图片切换的js代码

    简单的实现点击箭头图片切换的js代码

    步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I

  • 最简单的js图片切换效果实现代码

    无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]

  • js运动框架_包括图片的淡入淡出效果

    复制代码 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font>&l

  • 纯js实现背景图片切换效果代码

    html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

  • js实现图片淡入淡出切换简易效果

    本文实例为大家分享了js图片淡入淡出切换详细代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul{overflow: hidden;} li{list-style:

随机推荐