一个非常好用的文字滚动的案例,鼠标悬浮可暂停
admin
2023-08-02 18:00:07
0

网上找了很多,万变不离其宗,写法核心都是一样的,在这里我给大家总结一下,可收藏备用。

html:


    
        
  • 公告一 或 中奖者 甲
  •         
  • 公告二 或 中奖者 乙
  •         
  • 公告三 或 中奖者 丙
  •     

    解析:适用于只有一行显示的公告类,以及展示中奖名单/抽奖结果等大框类,改变list高度即可

    注意:list高度要和scroll高度一致,list不要有padding,否则会有虚闪,scroll一定要加

    overflow:hidden;否则所有的li都会列出来。

    方案一:

    function autoScroll(obj) {
        $(obj).find(".list").animate({
            marginTop: "-25px"
        }, 1000, function () {
            $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
        })
    }
    var timer = setInterval('autoScroll(".scroll")', 1000);
    $(function () {
        $(".scroll").hover(function () {
            clearInterval(timer);
        }, function () {
            timer = setInterval('autoScroll(".scroll")', 1000);
        })
    })

    方案二:

    function autoScroll(obj) {
        //var _t;
        function scroll() {
            $(obj).find(".list").animate({
                marginTop: "-25px"
            }, 500, function () {
                $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
            })
        }
        var timer = setInterval(scroll, 2800);
        $(obj).hover(
            function () {
                clearInterval(_t);
            },
            function () {
                timer = setInterval(scroll, 2800);
            }
        )
    }
    $(function () {
        autoScroll(".scroll");
    })

    解析:两种方案实现的功能是一样的,都是通过改变margin-top的值,把第一个再添加到最后一个来实现的。第一种直接写出运行步骤,定时器可以定义在加载函数的外面,也可写在里面,但是以下的内容必须写在加载函数的里面,否则不能正常执行。

        如果整体又定义为一个函数,则下面要在加载函数里调用一次函数,即可执行。

        在hover事件中的回调函数,必须写timer=setInterval(),指定时器重新赋值给timer,直接写setInterval不起作用,如果写var timer=setInterval();则又重新定义了一个timer,同样不起作用。


    相关内容

    热门资讯

    葬礼感人一幕!婴儿抱着哈梅内伊... 7月4日至9日,伊朗为已故最高领袖哈梅内伊及其4位亲属(女儿、女婿、儿媳和外孙女)举行葬礼。9日,他...
    凤凰直击俄军解救任务:无人机开... 乌克兰武装部队7月10日已向康城(康司坦丁诺夫卡)彼邻的德鲁日基夫卡市部署了约数十个单位的兵力,其中...
    张玉卓任中国工程院党组书记、院... 7‍‍月11日,中国工程院官网更新了该院领导信息。中国工程院第九届院领导班子组成如下:张玉卓同志任党...
    美国设定时间要求伊朗承诺停止袭... 【环球网报道 记者 姜蔼玲】据美国Axios新闻网当地时间10日报道,美国要求伊朗公开承认霍尔木兹海...
    新华鲜报丨创历史新高 上半年3... 出入境人数创历史新高、外国人入境游持续火爆、出入境政务服务更便利贴心……7月10日,国家移民管理局通...
    山东迎战“巴威”,多地水库提前... 今年第9号台风“巴威”正朝山东奔来。根据央视新闻报道,“巴威”今天(7月11日)零时再度增强为强台风...
    哈梅内伊葬礼结束,灵柩移入陵墓 据凤凰卫视报道,伊朗已故最高领袖哈梅内伊的安葬仪式已经结束,他的灵柩被移入陵墓。哈梅内伊网站公布了相...
    广西抗洪军人在救援途中,偶遇自... 7月9日上午在广西贵港市港北区执行城市清淤任务的陆军第75集团军某旅官兵突然接到新的救援任务有数百名...
    美媒:万斯等人仍与伊朗间接对话... 据凤凰卫视报道,美国总统特朗普7月10日宣布,美国与伊朗的停火已经结束,但双方将继续谈判。知情人士透...
    空调显示E5故障代码的维修方法 空调3匹机,开机制冷运行后出现E5故障代码,断电后重新开机,打到制冷运行约3分钟后,又出现E5故障代...