列表走马灯效果

四月_h

已于 2024-02-27 10:05:37 修改

阅读量194

点赞数

文章标签： css3 javascript 动画

于 2023-02-22 14:15:24 首次发布

本文链接：https://blog.csdn.net/weixin_46389242/article/details/129161689

版权

列表走马灯效果（上下滚动）
方案一

adds()
        $('#ck_center_top2_ul').mouseover(function() {
            //鼠标移入
            clearInterval(a);
        }).mouseleave(function() {
            //鼠标移出
            adds();
        });
function adds() {
    a = setInterval(function() {
        addadd()
    }, 1000)

    function addadd() {
        var oul = document.getElementById("ck_center_top2_ul");
        var olis = oul.getElementsByTagName("li")[0];
        var delLi = $('#ck_center_top2_ul li').eq(0);
        olis.className = "flipOutX";
        setTimeout(function() {
            olis.style.cssText = "padding:0;border-width:0;margin:0;height:0";
        }, 280);
        setTimeout(function() {
            olis.classList.remove('flipOutX');
            oul.removeChild(olis)
            olis.style.cssText = "border-width:1px;height:2.5rem";
            oul.appendChild(olis)
        }, 1000)
    }
};
走马灯滚动样式

```javascript

@keyframes flipOutX {
    from {
        -webkit-transform: perspective(25rem);
        transform: perspective(25rem);
    }
    30% {
        -webkit-transform: perspective(25rem) rotate3d(1, 0, 0, -20deg);
        transform: perspective(25rem) rotate3d(1, 0, 0, -20deg);
        opacity: 1;
    }
    to {
        -webkit-transform: perspective(25rem) rotate3d(1, 0, 0, 90deg);
        transform: perspective(25rem) rotate3d(1, 0, 0, 90deg);
        opacity: 0;
    }
}

.flipOutX {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;
    animation-duration: .7s;
    animation-timing-function: linear;
    -webkit-animation-duration: .7s;
    animation-fill-mode: forwards;
    /*规定对象动画时间之外的状态*/
    -webkit-animation-fill-mode: forwards
}

方案二

window.onload = function() {
    function dMarquee(id) {
        let speed = 20; //速度
        let stop = 1000; //停止时间
        let ul = document.getElementById(id); //获取ul元素
        let rows = ul.getElementsByTagName('li').length; //获取li个数
        let height = ul.getElementsByTagName('li')[0].offsetHeight; //取得第一个li的高度
        ul.innerHTML += ul.innerHTML; //获取所有li
        let timeID = false; //setTime的时间标示
        let play = function() { //移动方法
            ul.scrollTop++; //移动滚动条
            //移动到底的时候恢复为零
            if (ul.scrollTop === rows * height) {
                ul.scrollTop = 0;
            }
            //每次滚动
            if (ul.scrollTop % height === 0) {
                timeID = setTimeout(play, stop);
            } else {
                timeID = setTimeout(play, speed);
            }
        }
        timeID = setTimeout(play, stop);
        ul.onmouseover = function() {
            clearTimeout(timeID);
        }
        ul.onmouseout = play;
    }

    dMarquee('ck_center_top2_ul') //传入id值
}