js实现⽂字从右滚动到左边代码循环滚动实例
说明：实现js⽂字从右边到左滚动循环的效果
适⽤：所有⽀持js的页⾯均可
效果图：
代码⽚段：
<html>
<head>
<meta charset="UTF-8">
<title>js⽂字从右边到左滚动效果</title>
<style>
#static_big_box{
position: relative;
width:900px;
margin:0 auto;
height:30px;
line-height:30px;
padding-right:65px;
overflow:hidden;
}
#runing_box{
position: absolute;
height:30px;
line-height:30px;
top: 0px;
left:0;
}
#runing_box a{
color:#fff;
margin-left:8px;
}
#runing_box a:hover{
color:#57bc54;
}
.content{
background:#333;
}
</style>
</head>
<body>
<div class="content">
<div id="static_big_box">
<div id="runing_box">
<a href="" target="_blank">没有字怎么可以滚动？1</a>
<a href="" target="_blank">没有字怎么可以滚动？2</a>
<a href="" target="_blank">没有字怎么可以滚动？3</a>
<a href="" target="_blank">没有字怎么可以滚动？4</a>
<a href="" target="_blank">没有字怎么可以滚动？5</a>
<a href="" target="_blank">没有字怎么可以滚动？6</a>
<a href="" target="_blank">没有字怎么可以滚动？7</a>
<a href="" target="_blank">没有字怎么可以滚动？8</a>
<a href="" target="_blank">没有字怎么可以滚动？9</a>
<a href="" target="_blank">没有字怎么可以滚动？10</a>
<a href="" target="_blank">没有字怎么可以滚动？11</a>
<a href="" target="_blank">没有字怎么可以滚动？12</a>
<a href="" target="_blank">没有字怎么可以滚动？13</a>
<a href="" target="_blank">没有字怎么可以滚动？14</a>
<a href="" target="_blank">没有字怎么可以滚动？15</a>
<a href="" target="_blank">没有字怎么可以滚动？16</a>
<a href="" target="_blank">没有字怎么可以滚动？16</a>
<a href="" target="_blank">没有字怎么可以滚动？17</a>
<a href="" target="_blank">没有字怎么可以滚动？18</a>
<a href="" target="_blank">没有字怎么可以滚动？19</a>
<a href="" target="_blank">没有字怎么可以滚动？20</a>
<a href="" target="_blank">没有字怎么可以滚动？21</a>
<a href="" target="_blank">没有字怎么可以滚动？22</a>
<a href="" target="_blank">没有字怎么可以滚动？23</a>
<a href="" target="_blank">没有字怎么可以滚动？24</a>
<a href="" target="_blank">没有字怎么可以滚动？25</a>
<a href="" target="_blank">没有字怎么可以滚动？26</a>
<a href="" target="_blank">没有字怎么可以滚动？27</a>
<a href="" target="_blank">没有字怎么可以滚动？28</a>
<a href="" target="_blank">没有字怎么可以滚动？29</a>
<a href="" target="_blank">没有字怎么可以滚动？30</a>
<a href="" target="_blank">没有字怎么可以滚动？31</a>
<a href="" target="_blank">没有字怎么可以滚动？32</a>
<a href="" target="_blank">没有字怎么可以滚动？33</a>
<a href="" target="_blank">有字才可以滚动34</a>
<a href="" target="_blank">有字才可以滚动35</a>
<a href="" target="_blank">有字才可以滚动36</a>
<a href="" target="_blank">有字才可以滚动37</a>
<a href="" target="_blank">有字才可以滚动38</a>
<a href="" target="_blank">有字才可以滚动39</a>
<a href="" target="_blank">有字才可以滚动40</a>
<a href="" target="_blank">有字才可以滚动41</a>
<a href="" target="_blank">有字才可以滚动42</a>
<a href="" target="_blank">有字才可以滚动43</a>
<a href="" target="_blank">有字才可以滚动44</a>
<a href="" target="_blank">有字才可以滚动45</a>
<a href="" target="_blank">有字才可以滚动46</a>
javascript说明
</div>
</div>
</div>
<script type="text/javascript">
var seconds = 100;//单位秒
var box_obj = ElementById('runing_box')
var distance = box_obj.width||box_obj.clientWidth || box_obj.offsetWidth||box_obj.scrollWidth;  console.log(distance);
var i =0;
function start(){
i--;
if(i<=-distance){
i=2*distance;
}else{
var now_left = i>=distance?i-distance:i;
}
setTimeout(start,10);
}
onload=function(){setTimeout(start,seconds)};
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。