前端插件之跑马灯

来源：互联网发布：值得玩的网游知乎编辑：程序博客网时间：2024/06/07 22:37

1.效果图

不间断滚动。

2.css代码

#wrapper{        border-top: 3px solid #EB782E;        width: 1200px;        margin: 0 auto;               margin-top: 30px;             position: relative;      }      #wrapper .over{width: 1200px;height: 100px;overflow: hidden;position: relative;}      .hmBom_nm { color: #FFF; background: #eb782e; position: absolute; left: 0px; top: -15px; line-height: 27px; height: 27px; width: 160px; font-size: 12px; font-weight: bold; text-align: center; display: inline-block; padding: 0px 18px; border-radius: 1.6em; text-transform: uppercase; }      #wrapper ul {        position: absolute;        left: 0;        top: 10px;      }      #wrapper li{      text-align: center;        float: left;        width: 120px;        margin-right: 40px;        list-style: none;      }      #wrapper li img{        width: 120px;        height: 40px;              }

3.js代码

window.onload=function(){        var timer=null;        var speed=-2;        var od=document.getElementById("wrapper");        var au=od.getElementsByTagName('ul')[0];        var ali=au.getElementsByTagName('li');        au.innerHTML=au.innerHTML+au.innerHTML;        au.style.width=(ali[0].offsetWidth+40)*ali.length+'px';        timer=setInterval(move,30)        function move(){          if(au.offsetLeft<-au.offsetWidth/2){            au.style.left='0';          }          if(au.offsetLeft>0){            au.style.left=-au.offsetWidth/2+'px';          }          au.style.left=au.offsetLeft+speed+'px';        }        od.onmouseover=function(){          clearInterval(timer);        }        od.onmouseout=function(){          timer=setInterval(move,30)        }              }

3.html代码

<div id="wrapper" ><div class="hmBom_nm">合作伙伴partner</div><div class="over">      <ul>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>        <li>        <img src="1.jpg"/>        <p>1</p>        </li>              </ul>      </div>    </div>

阅读全文

0 0