列表走马灯效果

列表走马灯效果(上下滚动)
方案一

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值
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值