marquee内部数据动态生成时,首次加载会闪跳问题

   <marquee id="affiche" align="left" behavior="scroll" direction="left" height="30" width="580" hspace="50" vspace="20" loop="-1" scrollamount="6" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">
        配置【首页平移公告】只能按照最新创建的进行展示
    </marquee>

本次有个需求要用到公告滚动,所以采用了marquee,但遇到一个问题:当页面首次加载时,文字还没有滚动完,就会突然闪跳重新开始。原因是因为要展示的文字是通过ajax请求取得,所以当首次加载页面时,marquee会认为内容宽度只有静态布局时的宽度,当内容滚完,marquee以为本次滚动结束,就会从头开始滚动,导致了闪跳。。

解决:在调用接口获取数据之后再添加marquee标签即可

  //盒子用于存放滚动的内容
  <div id="affiche"> </div>
 //ajax请求在获取数据时再绑定marquee
 $.ajax({
        data: {
            ajaxMethod: 'ajaxGetAffiche',   --ajaxMethod为封装的
            modemp: JSON.stringify(top.modemp)
        },
        type: 'post',
        dataType: 'json',
        cache: false,
        async: true,
        success: function (data) {
            var htm = "";
            //data.JumpData为返回的内容集合
            if (data.JumpData.length > 0) {
                htm += '<marquee behavior="scroll" direction="left" style="float:left;height: 26px; width:95%;" hspace="50" vspace="20" loop="-1" scrollamount="6" scrolldelay="100" onmouseout="this.start()" onmouseover="this.stop()">';
                htm += '<a id="affiche_content" style="width:100%;" onclick="DetailChe()">' + data.JumpData[0].FHSPNAME + "最新公告如下:" + data.JumpData[0].AFFICHECONTENT + '</a>';
                htm += '</marquee>';
                $("#affiche").html(htm);
            }
            else {
                $("#affiche").css("display", "none");
            }
        }
    });

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值