<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以为本次滚动结束,就会从头开始滚动,导致了闪跳。。
解决:
//盒子用于存放滚动的内容
<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");
}
}
});