⽂字⽆缝滚动轮播(⾛马灯效果)⽂字横向跑马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript" type="text/javascript">
var box = ElementById('box');
var divList = ElementById('divList');
var copyDiv = ElementById('copyDiv');
var copyDivW =copyDiv.clientWidth;
var speed = 10; //移动速度,值越⼤速度越慢
html滚动效果代码function marquee() {
if (copyDiv.offsetLeft - box.scrollLeft <= 0){//判断复制的信息是否到达box的最左边
box.scrollLeft -= divList.offsetWidth-copyDivW
}else {
box.scrollLeft++
}
}
var timer = setInterval(marquee, speed);//设置定时器
}
</script>
<style>
.news{
float: left;
width: 300px;
}
</style>
</head>
<body>
<div id="box" >
<div id="divList" >
<div class="news">我是第⼀条信息</div>
<div class="news">我是第⼆条信息</div>
<!-- 将第⼀条信息复制 -->
<div class="news" id="copyDiv">我是第⼀条信息</div>
</div>
</div>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论