|
文字由左向右循环滚动DIY+CSS+js模块.zip
https://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>
|
|
发表于 