1.文字过长时，跑马灯展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.pao-box{
display: inline-block;
57%;
overflow: hidden;
white-space:nowrap;
font:normal normal 18px/44px 'PingFangSC-Regular';
color: #fff;
}
.pao-text.padding{
padding-right: 20px;
}
</style>
</head>
<body>
<div>
<span class="pao-box" data-select="" data-editor="">
<span class="pao-content">
<span class="pao-text">新华网北京2月19日电支持配置文案</span>
</span>
</span>
</div>
<script src='jquery.js'></script>
<script>
var box=$('.pao-box');
var content=$('.pao-content');
var text=$('.pao-text');
var boxWidth=box.width();
var textWidth=text.width();
var position=0;
checkScrollLeft()
function toScrollLeft(){
// 如果文字长度大于滚动条距离，则递归拖动
if(textWidth > box.scrollLeft()){
box.scrollLeft(position++)
setTimeout('toScrollLeft()', 18);
}
else{
setTimeout("fun2()",2000);
}
}
function checkScrollLeft(){
// 判断文字长度是否大于盒子长度
if(boxWidth > textWidth){ return false}
content.append($(".pao-text").clone());
$('.pao-text:first').addClass('padding')
// 更新
textWidth = text.outerWidth()
toScrollLeft()
}
function fun2(){
position=0
box.scrollLeft(position)
toScrollLeft();
}
</script>
</body>
</html>
//2.跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.sstzNoticeStyle{
font-size:16px;
text-decoration:none;
}
.sstzNoticeStyle:hover{
font-size:16px;
text-decoration:none;
}
.paomadeng{
100%;
margin-left: auto;
margin-right: auto;
height: 47px;
overflow: hidden;
}
.paomadeng ul{
position:absolute;
left:0;
top:0;
margin: 0px;
margin-bottom:0px;
100%;
height:47px;
}
.paomadeng ul li{
list-style: none;
display:inline-block;
float:left;
height:47px;
line-height:47px;
padding-right:50px;
}
</style>
</head>
<body>
<div class="paomadeng">
<ul id="syNoticeUlNew">
<li>
<span>gggg</span>
</li>
<li>
<span>bbbbb</span>
</li>
<li>
<span>dddddd</span>
</li>
<li>
<span>bbbbbffff</span>
</li>
<li>
<span>dsdsds</span>
</li>
</ul>
</div>
<script src="jquery.js"></script>
<script>
function syRunHorseLight() {
if (syTimer != null) {
clearInterval(syTimer);
}
var oUl = document.getElementById("syNoticeUlNew");
if(oUl != null){
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
oUl.innerHTML += oUl.innerHTML;
var lis = oUl.getElementsByTagName('li');
var lisTotalWidth = 0;
var resetWidth = 0;
for (var i = 0; i < lis.length; i++) {
lisTotalWidth += lis[i].offsetWidth;
}
for (var i = 1; i <= lis.length / 4; i++) {
resetWidth += lis[i].offsetWidth;
}
oUl.style.width = lisTotalWidth + 'px';
var left = 0;
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20)
$("#syNoticeUlNew").hover(function() {
clearInterval(syTimer);
}, function() {
clearInterval(syTimer);
syTimer = setInterval(function() {
left -= 1;
if (left <= -resetWidth) {
left = 0;
}
oUl.style.left = left + 'px';
}, 20);
})
}
}
var syTimer=null
syRunHorseLight()
</script>
</body>
</html>