文字由左向右循环滚动DIY+CSS+js模块
文字由左向右循环滚动DIY+CSS+js模块.ziphttps://drive.uc.cn/s/d07c44a837cb4
https://pan.quark.cn/s/fcf461656a97
可以做友情链接广告公告等等
下面单独代码
<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:#FFFFFF;}.content{background:#333;}
</style>
<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">文字循环滚动演示！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>
</div>
</div>
</div>
<script type="text/javascript">
var seconds = 100;//单位秒
var box_obj = document.getElementById('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;
document.getElementById('runing_box').style.right =-distance+'px';
}else{
var now_left = i>=distance?i-distance:i;
document.getElementById('runing_box').style.left =now_left+'px';
}
setTimeout(start,10);
}
onload=function(){setTimeout(start,seconds)};
</script>
页:
[1]