码迷,mamicode.com
首页 > 编程语言 > 详细

原生javascript效果:无缝滚动

时间:2014-09-11 19:07:22      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   os   java   ar   div   sp   

<style type="text/css">
#con {width:400px; padding:10px; margin:20px auto; text-align:center; border:1px solid #ccc;}
#con .roll {width:400px; height:100px; position:relative; overflow:hidden; margin-bottom:10px;}
#con ul {position:absolute;}
#con ul li {float:left; width:120px; height:100px; padding-left:10px;}
#con ul li a {display:block; width:120px; height:100px; background:#333; color:#fff;}
#con span {display:inline-block; *display:inline; *zoom:1; height:30px; line-height:30px; padding:0 10px; background:#ccc;}
</style>

  

js:

<script type="text/javascript">
window.onload=function () {
        var oCon = document.getElementById(‘con‘);
        var oUl = oCon.getElementsByTagName(‘ul‘)[0];
        var aLi = oUl.getElementsByTagName(‘li‘);
        var aSpan = oCon.getElementsByTagName(‘span‘);
        var iSpeed = -2;
        var timer;
        
        oUl.innerHTML += oUl.innerHTML;
        oUl.style.width = aLi.length*aLi[0].offsetWidth+‘px‘;
        
        function goRoll() {
                timer = setInterval(function() {
                        oUl.style.left = oUl.offsetLeft+iSpeed+‘px‘;
                        if(oUl.offsetLeft<-oUl.offsetWidth/2) {
                                oUl.style.left = ‘0px‘;
                        } else if(oUl.offsetLeft>=0) {
                                oUl.style.left = -oUl.offsetWidth/2+‘px‘;
                        }
                }, 30);
        }
        
        oUl.onmouseover = function() {clearInterval(timer);};
        oUl.onmouseout = function() {goRoll();};
        
        aSpan[0].onmouseover = function() {iSpeed = -2};
        aSpan[1].onmouseover = function() {iSpeed = 2};
        
        goRoll();
};
</script>

  

 

 

html:

<div id="con">
                <div class="roll">
                        <ul>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />001</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />002</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />003</a></li>
                                <li><a href="javascript:;">mming<br />无缝滚动演示<br />004</a></li>
                        </ul>
                </div>
                <span><< 向左</span>
                <span>向右 >></span>
 </div>

  

 

原生javascript效果:无缝滚动

标签:style   blog   color   io   os   java   ar   div   sp   

原文地址:http://www.cnblogs.com/xupeiyu/p/3966962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!