html5 ul自动滚动jQuery实现

版权声明：转载请注明出处 https://blog.csdn.net/weixin_43420337/article/details/83108621

效果

地址

jQuery代码

 $(document).ready(function(){
        var marginTop =0;
        var bool=false;
        // 判断有多少个li 
        var lengli = $("#notice li").length -2;
        setInterval(function(){
            if(bool) return;//判断运行和停止
            $(".web-notice li:first").animate({marginTop:marginTop--},10,function(){
                if(!($(this).is(":animated"))) {    //判断是否有一个动画节点
                    if ((-marginTop) >= $(this).height()*lengli) {  //判断移出位置是否超过高度
                        $(this).css("margin", "0");
                        $(this).appendTo($(".text"));  //把第一个节点移到ul后面
                        marginTop = 0;      //重新设置移动数值
                    }
                }
            });
        },100);
        $(".web-notice").mouseover(function(){   //li鼠标移入，停止移动
            bool=true;
        });
        $(".web-notice").mouseout(function(){
            bool=false;
        });

    });