<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#scroll_div {
height: 30px;
line-height: 30px;
overflow:hidden;
white-space: nowrap;
width: 800px;
background-color: #23527c;
color: #d8d8d8;
margin: 1rem 0;
text-align: center;
}
#scroll_begin,#scroll_end {
display: inline;
}
</style>
</head>
<body>
<div id="scroll_div">
<div id="scroll_begin">
<span class="pad_right">这是第一条啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</span>
</div>
<div id="scroll_end"></div>
</div>
<script>
function ScrollImgLeft() {
var speed = 20;//初始化速度 也就是字体的整体滚动速度
var MyMar = null;//初始化一个变量为空 用来存放获取到的文本内容
var scroll_begin = document.getElementById("scroll_begin");//获取滚动的开头id
var scroll_end = document.getElementById("scroll_end");//获取滚动的结束id
var scroll_div = document.getElementById("scroll_div");//获取整体的开头id
scroll_end.innerHTML = scroll_begin.innerHTML;//滚动的是html内部的内容,原生知识!
//定义一个方法
function Marquee() {
if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0){
scroll_div.scrollLeft -= scroll_begin.offsetWidth;
} else{
scroll_div.scrollLeft++;
}
}
MyMar = setInterval(Marquee, speed);
//滑入暂停
scroll_div.onmouseover = function () {
clearInterval(MyMar);
}
//滑出继续
scroll_div.onmouseout = function () {
MyMar = setInterval(Marquee, speed);
}
}
ScrollImgLeft();
</script>
</body>
</html>
第二种:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#affiche {
color: red;
display: block;
width: 60%;
height: 30px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.affiche_text {
position: absolute;
top: 0;
left: 100%;
line-height: 30px;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
color:#404d5b;
}
</style>
</head>
<body>
<div id="affiche">
<div class="affiche_text">
测试内容
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js" ></script>
<script type="text/javascript">
(function(){var timer = setTimeout(this.marquee, 1000);}());
function marquee() {
var scrollWidth = $('#affiche').width();
var textWidth = $('.affiche_text').width();
var i = scrollWidth;
setInterval(function() {
i--;
if(i < -textWidth ) {
i = scrollWidth + 50;
}
$('.affiche_text').animate({'left': i+'px'}, 20);
}, 20);
}
</script>
</body>
</html>