<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game1</title>
</head>
<body>
<div id="marquee_left" class="marquee">
<div id="marquee_left1" class="content">
测试文本1测试文本2测试文本3测试文本4测试文本5测试文本6测试文本7测试文本8测试文本9测试文本8测试文本7测试文本6测试文本5测试文本4测试文本3测试文本2
</div>
</div>
</body>
<script type="text/javascript">
function run_marquee() {
var speed = 30;
//速度数值越大速度越慢
var marquee_left1 = document.getElementById("marquee_left1");
var marquee_left = document.getElementById("marquee_left");
marquee_left1.innerHTML = marquee_left1.innerHTML + '';
function Marquee3() {
if(!marquee_left1.innerHTML){
return ;
}
if (marquee_left1.offsetWidth - marquee_left.offsetWidth <= marquee_left.scrollLeft) {
if(marquee_left1.offsetWidth<5000){
marquee_left1.innerHTML = marquee_left1.innerHTML + ' ' + marquee_left1.innerHTML;
}else{
marquee_left.scrollLeft -= marquee_left1.offsetWidth //scrollWidth 是对象的实际内容的宽，不包边线宽度
}
} else {
marquee_left.scrollLeft++;
}
}
setInterval(Marquee3, speed);
}
run_marquee();
</script>
<style>
.marquee {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.3);
color: #FFF;
display: block;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
z-index: 23;
}
.marquee .content {
display: inline-block;
position: relative;
padding-right: 0px;
/*white-space: nowrap;*/
/*animation: kf-marque-animation 2s infinite linear;*/
}
</style>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>game1</title>
</head>
<div class="marquee">
<span class="content">
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111111
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本12222223
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111133
测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本11111433
<span class="content-space"></span>
</span>
</div>
<style>
/*滚动播放*/
@keyframes kf-marque-animation {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-33.3%);
}
}
.marquee {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.3);
color: #FFF;
display: block;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
z-index: 23;
}
.marquee .content {
display: inline-block;
position: relative;
padding-right: 0px;
white-space: nowrap;
animation: kf-marque-animation 2s infinite linear;
}
.marquee .content-space {
display: inline-block;
width: 5em;
}
</style>
<script>
//滚动
function run_marquee() {
var speed = 50; // 速度 -- px每秒
var $marquee = document.querySelector('.marquee');
var $marqueeContent = $marquee.querySelector('.content');
// 内容复制3份好有连续性
$marqueeContent.innerHTML = $marqueeContent.innerHTML + $marqueeContent.innerHTML + $marqueeContent.innerHTML
var contentWidth = $marqueeContent.getBoundingClientRect().width;
if (contentWidth <= 0) {
return;
}
// 内容复制了3份，宽度也要除以3
contentWidth = contentWidth / 3;
// 计算一次动画应该要花费多少时间
var onceTime = contentWidth / speed * 1000; //ms
$marqueeContent.style.animationDuration = onceTime + "ms";
}
run_marquee();
</script>
misswell