您现在的位置: 365建站网 > 365学习 > CSS3/js/jquery实现淡入(fadeIn)淡出(fadeOut)效果的方法

CSS3/js/jquery实现淡入(fadeIn)淡出(fadeOut)效果的方法

文章来源:365jz.com     点击数:592    更新时间:2017-12-26 09:36   参与评论
基于CSS3实现淡入(fadeIn)淡出(fadeOut)效果:

淡入淡出效果大多是依照jQuery中fadeIn和fadeOut的方法使用js来控制元素的透明度达到目的,但缺点是有轻微的卡顿感,并且运行效率一般。 这里提供另外一个思路,即通过预先定义好的css样式控制图片透明度的过渡, 这种方法过渡平滑,过渡的效果基于CSS3的animation,所以效率高些。 思路是将淡入,淡出的效果做成预先定义好的样式类,然后用JS改变元素的类来达到图片轮播。(注意:因为是基于CSS3的animation,在移动端做的兼容性测试表现不错,桌面端暂时没有发现太大的问题。但IE对于css的background支持不太好,外链图片有时会有问题。)
基于CSS3淡入淡出效果的图片自动轮播DEMO点击预览
关键点在于fadeIn和fadeOut之间的透明度切换:

/* 轮播图片默认的样式*/
       .bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      -webkit-transition: opacity 2s linear;
      -moz-transition: opacity 2s linear;
      -o-transition: opacity 2s linear;
      transition: opacity 2s linear;
      opacity:0;
      filter:alpha(opacity=0);
    }
        .fadein{
            opacity:100;
            filter:alpha(opacity=100);
        }

   
PS:轮播图片默认透明度为0,设置一个opacity=100名为fadein的类使用JS控制其与默认透明度的切换,本篇博客的轮播方法是自动的一张张切换,并无交互性, 使用触控左右滑动图片的轮播请猛戳俺的另一篇博客:原生JS实现滑动图片轮播

而JS方面则是通过获取imgs数组,轮播其中存放图片的div, 方法是控制图片div的class。
废话不多说,上代码:

HTML(后插入的图片显示在前):

<div id="imgs">
  <div id="bg1" class="bg"></div>
  <div id="bg2" class="bg"></div>
</div>

CSS:

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 2s linear;
  -moz-transition: opacity 2s linear;
  -o-transition: opacity 2s linear;
  transition: opacity 2s linear;
  opacity:0;

}

#bg1 {
  background: url(http://i1.tietuku.com/7b57a678c8999dbas.jpg) no-repeat;
  background-size: cover;
 
}

#bg2 {
  background: url(http://i1.tietuku.com/1182f22573e6051fs.jpg) no-repeat;
  background-size: cover;
}

.fadein {
  opacity: 100;
  filter: alpha(opacity=100);
}


JS:

// 替换class达到淡入淡出的效果
function fadeIn(e) {
  e.className = "bg fadein"
};

function fadeOut(e) {
  e.className = "bg"
};
//申明图片数组中当前的轮播图片
cur_img = document.getElementById("imgs").children.length - 1;
//图片轮播函数
function turnImgs(imgs) {
    var imgs = document.getElementById("imgs").children;
    if (cur_img == 0) {
      fadeOut(imgs[cur_img]);
      cur_img = imgs.length - 1;
      fadeIn(imgs[cur_img]);
    } else {
      fadeOut(imgs[cur_img]);
      fadeIn(imgs[cur_img - 1]);
      cur_img--;
    }
  }
  //设置轮播间隔
setInterval(turnImgs, 3000);

demo中只用了两张图片,如果需要插入更多的图片,可以在id=“imgs”的div中加入一个新的子div ,class加上bg即可,然后在CSS中加入该div的描述,比如HTML中加入<div id="bg3" class="bg"></div>,然后CSS中则加入

#bg3 {
  background: url(图片地址) no-repeat;
  background-size: cover;
}
即可。


原生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 = opacity / 100; 

} else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
} 

关于有的小伙伴这样写:
 
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
} 

我想说这样在IE10下运行有问题,点了之后没反应。因为IE10支持opacity属性不支持filter了,这个方法不可取。

fadein 函数代码:
 
function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

fadeout 函数代码:
 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

下面给一个demo示例:
 
<!DOCTYPE html> 
<html XMLns="http://www.w3.org/1999/XHTML"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/JavaScript" src="fade.js"></script> 
<script type="text/javascript"> 

window.onload = function () { 


document.getElementById('Button1').onclick = function () { 

fadeout(document.getElementById('DV'), 0, 6000); 

} 
document.getElementById('Button2').onclick = function () { 

fadein(document.getElementById('DV'), 80, 6000); 

} 
} 
</script> 
</head> 
<body> 

<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 

</body> 
</html> 

Jquery中淡入淡出效果fadeIn()、fadeOut()、fadeToggle()、fadeTo()的使用方法:

一、基本语法

1、fadeIn淡入、fadeOut淡出、fadeToggle淡入淡出切换(已经淡出点击淡入,或者相反):

$(selector).fadeIn(duration,complete); 

$(selector).fadeOut(duration,complete); 

$(selector).fadeToggle(duration,complete); 

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"(200ms)、"fast"(600ms) 或毫秒。【默认为400ms】
可选的 callback 参数是 fading 完成后所执行的函数名称。

2、fadeTo:jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback); 

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。

二、使用方法

1、内联调用(匿名函数)

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="utf-8" /> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>   
    <script>   
        $(document).ready(function(){   
            $("button").click(function(){   
                $("#div1").fadeIn();   
                $("#div2").fadeIn("slow");   
                $("#div3").fadeIn(3000, function(){ 
                    document.getElementById("pp").innerHTML = "效果出现了!"; 
                });   
            });   
        });   
    </script>   
</head>   
   
<body>   
    <p>演示带有不同参数的 fadeIn() 方法。</p>   
    <p id="pp">Testing</p>   
    <button>点击这里,使三个矩形淡入</button>   
    <br><br>   
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>   
    <br>   
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>   
    <br>   
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>   
</body>   
</html>   

即直接在callback处写函数。
2、外部调用

<!DOCTYPE html> 
<html
<head
    <meta charset="utf-8" /> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script
    <script type="text/javascript"> 
        function myFunc(){ 
            document.getElementById("pp").innerHTML = "效果也出现了!"; 
        }; 
        $(document).ready(function(){ 
        $("button").click(function(){ 
            $("#div1").fadeIn("slow"); 
            $("#div2").fadeIn("fast"); 
                    $("#div3").fadeIn(3000, myFunc); 
        }); 
        }); 
    </script
</head
 
<body
    <p>演示带有不同参数的 fadeIn() 方法。</p
    <p id="pp">Testing</p
    <button>点击这里,使三个矩形淡入</button
    <br><br
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div
    <br
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div
    <br
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div
</body
</html

三、新API

点击参考 新API参数有三个,而callback(complete)参数是最后一个,那么为什么可以正确执行呢?
这是JS特性之一,以前没见过这样的函数调用(因为都有默认值),而且发现我根本没有把myFunc函数传递给Jquery函数!这必须深究一下,So JS函数到底是怎么回事?

四、JS函数重载

有过C系列语言学习经历的都知道,函数传递参数都会进行一致性检查,你传递多少个参数,参数的类型都会检查。但是由上面的例子可以看出,javascript却没有这样的一致性检查!多传、少传好像他都能接受。验证过后确定确实是这样的,传递很多个参数都可以。
还有一个问题是好像间隔传递都行?!这就很奇葩了,那么原因是什么呢?想了很久也没想明白!查看源码,发现很多jQuery.extend方法,那么确定了:原因是函数重载。但是我们注意到JS和C++的不同,C++会有参数检查,多了不行,所以可以直接定义多个参数类型或者个数不同的同名函数实现重载,JS却不管你有多少,只管前面的有效参数。那么怎么实现JS的函数重载?有很多方法!
1、利用arguments实现;
2、利用typeof进行参数类型判断;
但是这两种方法有很大的局限性,要是处理的参数很多,重载逻辑岂不是很复杂!?那么有没有好的方法呢?
最终发现暂时还没有极好的方法,但是看到几篇还不错的文章

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (592人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------