原生js实现淡入淡出效果

最新推荐文章于 2024-01-20 09:05:19 发布

路飞的红帽子

最新推荐文章于 2024-01-20 09:05:19 发布

阅读量1.3k

点赞数

分类专栏： 2017年9月文章标签：淡入淡出 fadeIn fadeOut 原生js

本文链接：https://blog.csdn.net/stead_ford/article/details/77774068

版权

2017年9月专栏收录该内容

4 篇文章 0 订阅

订阅专栏

fadein、fadeout可以实现对某个元素的淡入淡出操作，但是加载大大的jquery库，感觉到有些浪费资源。所以从原生的角度，去重写一个fadeIn_Out()函数使他满足淡入淡出的基本功能。

先来看看jQuery提供的fadeIn()和fadeOut()方法

fadeIn()

定义和用法
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
语法
$(selector).fadeIn(speed,[callback])

fadeOut

定义和用法
fadeOut() 方法用于淡出可见元素。
语法
$(selector).fadeOut(speed,[callback]);

html片段

<div class="news" id="news" >
    <ul class="news_image" id="news_image">
        <li ><img src="images/3.jpg" alt=""></li>
        <li ><img src="images/1.jpg" alt=""></li>
        <li ><img src="images/0.jpg" alt=""></li>
    </ul>
</div>

css片段

.news {
    width: 398px;
    height: 420px;
    margin: 100px 0 0 106px;
}
.news img {
    width: 398px;
    height: 420px;
    float: left;
    position: absolute;
}

说明：position:absolute配合float浮动来形成三张图片的叠加效果，默认情况下，叠放顺序依次为3.jpg、1.jpg、0.jpg。

js片段

One
首先写个“空壳”函数。


function fadeIn_Out(obj){
       //curIndex当前图片索引
       //timer计时器    
 }

Two
往“肚子”里塞东西。


function fadeIn_Out(obj){
    var num = 0;//num  计数
    var elems = document.getElementById("news").getElementsByTagName("li");// 获取待会要操作的元素
}

Three
“消化”食物：obj是Number类型，遍历取出li中的元素，假设当前elems[i].index与obj相等，则该元素opacity置为1，其余元素opacity置为0。setInterval(fn,time)中的time为100，一秒钟完成透明度的转换的意思，具体视觉体验可以自己更改数值。

function fadeIn_Out(obj){
    var num = 0;
      timer = setInterval(function(){
        num++;
        var elems = document.getElementById("news").getElementsByTagName("li");
        for(var i = 0; i < elems.length ; i++){
             if(i == obj){
                 elems[i].style.opacity = num/10;
             } else{
                 elems[i].style.opacity = 0;
             } 
         }
         if(num>=10){
               clearInterval(timer);
           }
       },100); 
}

Four
吃饱了没事干，女神在召唤

var niLen = $(".news_image li").length ;
var fadeTimer = setInterval(function() {
    if (curIndex < niLen-1) {
         curIndex++;
     } else {
         curIndex = 0
     }

     fadeIn_Out(curIndex);
}, 3000);

Five
写着写着功能实现了，fadeOut()假装是opacity=0实现的，fadeIn()假装是opacity=1实现的，就这么说~假装~~
IE浏览器玩家自行百度filter:alpha(opacity)设置透明度。
Six
知识大放送环节

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .news {
        width: 398px;
        height: 420px;
        margin: 72px 0 0 106px;
    }
    .news img {
        width: 398px;
        height: 420px;
        float: left;
        position: absolute;
    }
    </style>
</head>
<body>
    <div class="news" id="news" >
        <ul class="news_image " id="news_image">
            <li ><img class="img1" src="images/3.jpg" alt=""></li>
            <li ><img class="img2" src="images/1.jpg" alt=""></li>
            <li ><img class="img3" src="images/0.jpg" alt=""></li>
        </ul>
    </div>
</body>
<script>
    var curIndex = 0;
    var timer;
    var elems = document.getElementById("news").getElementsByTagName("li");
    function fadeIn_Out(obj){
        clearInterval(timer);
        var num = 0;
        timer = setInterval(function(){
            num++;

            for(var i = 0; i < elems.length ; i++){
                i == obj?elems[i].style.opacity = num/10: elems[i].style.opacity = 0;
            }
            if(num>=10){
                clearInterval(timer);
            }
        },100); 
    }

    setInterval(function() {
        var niLen = elems.length ;
        if (curIndex < niLen - 1) {
            curIndex++;
        } else {
            curIndex = 0
        }
        fadeIn_Out(curIndex);
    }, 3000);

</script>
</html>

结束语：小白初来乍到，写的不对的地方，拜托拜托大家予以批评指正。附上另外一种思路，完成淡入淡出的效果—-通过添加className给其添加类选择器，在css中使其opacity为0/1。

    var liList = $(".news_image").find("li");
    var num = 0;
    var timer;

    function play(num) {
        for (i = 0; i < liList.length; i++) {
            liList[i].className = "";
        }
        liList[num].className = "on";
    }
    timer = setInterval(function() {
        play(num);
        num++;
        if (num == liList.length) {
            num = 0;
        }

    }, 1500);