美文网首页
js实现切换图片时淡入淡出

js实现切换图片时淡入淡出

作者: 江海大初学者 | 来源:发表于2017-09-08 22:14 被阅读0次

废话不说,直接看需求。我们的界面要做成这样,如下图。

图1

当我们点击上边的yab时,可以随意切换图片,并实现淡入淡出。那么要怎样才能实现呢,我们先布局,然后将所有的图片通过定位属性重叠到一起,假设我们点击的是图片而,那么我们将第二张图片的opacity设为1,其他的设为0,0-1,1-0设置一个过度即可。之前我们封装过一个函数,所以我们会直接拿过来使用。
html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片的淡入淡出</title>
    <script src="utils.js"></script>
    <script src="fade.js"></script>
    <link rel="stylesheet" href="fade.css">
</head>

<body>
    <div id="box">
        <div id="tab">
            <a class="blackbg" href="javascript:">图片1</a>
            <a class="whitebg" href="javascript:">图片2</a>
            <a class="whitebg" href="javascript:">图片3</a>
            <a class="whitebg" href="javascript:">图片4</a>
        </div>
        <div id="imgList">
            ![](img/img1.jpg)
            ![](img/img2.jpg)
            ![](img/img3.jpg)
            ![](img/img4.jpg)
        </div>
    </div>
</body>

</html>

css代码

* {
    margin: 0;
    padding: 0;
}

a {
    text-align: center;
    color: #000;
    text-decoration: none;
}

#box {
    width: 400px;
    height: 250px;
    margin: 100px auto;
}

#imgList {
    position: relative;
}

#imgList img {
    width: 400px;
    height: 250px;
    position: absolute;
    left: 0;
    top: 0;
}

#tab a {
    display: inline-block;
    width: 96px;
    text-align: center;
    line-height: 34px;
}

.firstImg {
    z-index: 9;
}

.blackbg {
    background: #000;
    color: #fff;
}

.whitebg {
    background: #fff;
    color: #000;
}

js代码

//fade.js ↓↓↓↓↓
window.onload = function () {
    let tab = $("tab");
    let tabChildren = tab.children;

    let imgList = $("imgList");
    let imgListChildren = imgList.children;

    for (let i = 0; i < tabChildren.length; i++) {
        tabChildren[i].addEventListener("click", function () {
            tabChildren[i].className = "blackbg";
            MotionUtils.fadein(imgListChildren[i]);
            for (let j = 0; j < tabChildren.length; j++) {
                if (j !== i) {
                    tabChildren[j].className = "whitebg";
                    MotionUtils.fadeout(imgListChildren[j]);
                }
            }
        });
    }
}

//utils.js ↓↓↓↓↓
function $(id) {
    return document.getElementById(id);
}

function getStyle(element, attr) {
    let result = element.currentStyle ? element.currentStyle[attr] : getComputedStyle(element, null)[attr];
    return Number.parseFloat(result);
}



let MotionUtils = {
    /**
     *
     * @param obj 要改变的对象
     * @param attr 要改变的对象的属性
     * @param finalValue 要改变对象的属性的最大值
     * @param callback 在上一次运动完后下一次要运动的函数,回调自己
     */
    bufferMove: function (obj, data, callback) {
        //清除旧定时器
        clearInterval(obj.timer);
        //开启新定时器
        obj.timer = setInterval(function () {
            //flg标识运动是否完毕
            let flg = true;
            for (let attr in data) {
                //获得当前obj属性值
                let currentValue;
                if (attr === "opacity") {
                    currentValue = Number.parseFloat(getStyle(obj, attr)) * 100;
                } else {
                    currentValue = Number.parseInt(getStyle(obj, attr));
                }
                //计算速度
                let speed = (data[attr] - currentValue) / 8;

                //计算物体运动方向
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                //计算下一次obj的属性值
                let nextValue = currentValue + speed;
                //设置属性值
                if (attr === "opacity") {
                    obj.style[attr] = nextValue / 100;
                    obj.style.filter = "alpha(opacity=" + nextValue + ")";
                } else {
                    obj.style[attr] = nextValue + "px";
                }
                //判断当前属性是否运动完毕
                if (nextValue !== data[attr]) {
                    flg = false;
                }
            }
            //清除定时器
            if (flg) {
                clearInterval(obj.timer);
                //如果传了callback,那么就执行这个函数
                if (callback) {
                    callback();
                }
            }
        }, 50);
    },



    fadein: function (element) {
        let speed = 0.1;
        clearInterval(element.timer);
        element.timer = setInterval(function () {
            let currentOpacity = Number(getStyle(element, "opacity"));

            if (currentOpacity < 1) {
                element.style.opacity = currentOpacity + speed;
            }
            if (currentOpacity >= 1) {
                element.style.opacity = 1;
                clearInterval(element.timer);
            }
        }, 50);
    },

    fadeout: function (element) {
        let speed = 0.1;
        clearInterval(element.timer);
        element.timer = setInterval(function () {
            let currentOpacity = Number(getStyle(element, "opacity"));

            if (currentOpacity > 0) {
                element.style.opacity = currentOpacity - speed;
            }
            if (currentOpacity <= 0) {
                element.style.opacity = 0;
                clearInterval(element.timer);
            }
        }, 50);
    }


}

好了,我们就完成了。

相关文章

  • js实现切换图片时淡入淡出

    废话不说,直接看需求。我们的界面要做成这样,如下图。 当我们点击上边的yab时,可以随意切换图片,并实现淡入淡出。...

  • Jquery和纯JS实现轮播图--淡入淡出切换式

    今天分享一下淡入淡出式的轮播图,同样也是用纯js和Jquery两种方法来实现:JQUERY实现HTML结构: CS...

  • 2018-07-30

    Jquery和纯JS实现轮播图(一)--左右切换式 一、页面结构 对于左右切换式的轮播图的结构主要分为以下几个部分...

  • Vue实现选项卡效果

    效果图:点击上方选项卡实现下方数字切换效果 body部分: js部分: style部分:

  • 轮播图(2)——基于JQ的左右滑动轮播

    上回书我们说到原生js淡入淡出效果的轮播图,这回我们说说左右滑动轮播图,由于需要缓动动画效果,原生js需要封装缓动...

  • js 实现淡入淡出

    淡入淡出在实际的应用中经常用到,实现原理很简单,就是动态的修改他的opcity的值以下为实现代码,需要注意的地方已...

  • 常见tab效果的实现

    原生JS实现 tab栏切换地址JQ实现左侧菜单栏地址JQ实现滑动切换地址

  • 04封装的几个运动js

    one 第一个 应用第一个封装的js来实现的透明度的渐变的案例(多物体的淡入淡出) 效果图 应用第一个封装的js...

  • 原生JS实现Tab切换效果和模态框效果

    原生JS实现Tab切换效果 效果展示 原生JS实现模态框效果 效果展示

  • jquery特殊效果

    fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 ...

网友评论

      本文标题:js实现切换图片时淡入淡出

      本文链接:https://www.haomeiwen.com/subject/gkvnjxtx.html