最终效果:
源码:
<!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: 200px;
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>