Web前端开发中，文字或者图片无缝滚动的功能经常会遇到，比如向左向上循环滚动、一条条的滚动、多条一起滚动等等效果，很多小伙伴们习惯用插件去实现，比如swiper等。
想了解关于逐条或者单条滚动的童鞋可以看下之前分享的一篇文章：
今天介绍下用原生javascript如何实现文字向上和向左无缝循环滚动。
先来看下向左滚动的效果：
向左滚动
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js文字向左无缝滚动 - Web前端之家 https://www.jiangweishan.com</title>
</head>
<body>
<style type="text/css">
.qimo8
{
overflow: hidden;
width: 815px;
}
.qimo8 .qimo
{
/*width:99999999px;*/
width: 8000%;
height: 30px;
}
.qimo8 .qimo div
{
float: left;
}
.qimo8 .qimo ul
{
float: left;
height: 30px;
overflow: hidden;
zoom: 1;
}
.qimo8 .qimo ul li
{
float: left;
line-height: 30px;
list-style: none;
}
.qimo8 li a
{
margin-right: 10px;
color: #444444;
}
</style>
<div id="demo" class="qimo8">
<div class="qimo">
<div id="demo1">
<ul>
<li><a href='https://www.jiangweishan.com'>Web前端之家</a></li>
<li><a href='https://jiangweishan.com/%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/'>前端开发工具</a></li>
<li><a href='https://jiangweishan.com/VueJs/'>VUEJS</a></li>
</ul>
</div>
<div id="demo2">
</div>
</div>
</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML = document.getElementById("demo1").innerHTML;
function Marquee() {
if (demo.scrollLeft - demo2.offsetWidth >= 0) {
demo.scrollLeft -= demo1.offsetWidth;
}
else {
demo.scrollLeft++;
}
}
var myvar = setInterval(Marquee, 30);
demo.onmouseout = function () { myvar = setInterval(Marquee, 30); }
demo.onmouseover = function () { clearInterval(myvar); }
</script>
</body>
</html>可以预览看下效果。
向上滚动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>向上滚动 - Web前端之家 https://www.jiangweishan.com</title>
<style>
*{margin: 0;padding: 0}
#box{height: 140px; border: solid 1px; overflow: hidden;}
</style>
</head>
<body>
<div id="box">
<ul id="ul1">
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
<li>Web前端之家 https://www.jiangweishan.com</li>
</ul>
<ul id="ul2"></ul>
</div>
<script>
window.onload = roll(50);
function roll(t) {
var ul1 = document.getElementById("ul1");
var ul2 = document.getElementById("ul2");
var box = document.getElementById("box");
ul2.innerHTML = ul1.innerHTML;
box.scrollTop = 0;
var timer = setInterval(rollStart, t);
box.onmouseover = function () {
clearInterval(timer)
}
box.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
function rollStart() {
if (box.scrollTop >= ul1.scrollHeight) {
box.scrollTop = 0;
} else {
box.scrollTop++;
}
}
</script>
</body>
</html>大家看完两个DEMO，有没有发现写法有点不同，有对比才有伤害，有些开发经验的童鞋会发现，第二种写法会好些。您可以用第二种方法去实现第一种效果的，试试吧。
网友评论文明上网理性发言 已有0人参与
发表评论: