JS文本滚动 

<body>
        <div id="scroll-external">
            <ul id="scroll-inter">
                <li><a href="#">大漠孤烟直，长河落日圆1</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆2</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆3</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆4</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆5</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆6</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆7</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆8</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆9</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆10</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆11</a></li>
                <li><a href="#">大漠孤烟直，长河落日圆12</a></li>
            </ul>
        </div>
    </body>
<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#scroll-external{
			position: relative;
			width: 208px;
			height: 188px;
			overflow: hidden;
		}
		ul{
			border: 1px solid #00ff00;
			position: absolute;
		}
		ul li{
			list-style: none;
		}
	</style>

　　

<script type="text/javascript">
        onload=function(){
            var oDiv = document.getElementById("scroll-external");
            var oUl = document.getElementById("scroll-inter");
            var aLi = document.getElementsByTagName("li");
            
            var scrollUp = null;
            oUl.innerHTML += oUl.innerHTML;//将UL的内部HTML代码累加一次
            oUl.style.height = aLi[0].offsetHeight * aLi.length + "px";//实际高度等于任意一个LI高度与其数量相乘，注意需要指定单位。
            
            scrollUp = setInterval(function(){
                if(oUl.offsetTop < -oUl.offsetHeight/2){//当UL向上滚动到两倍高度的一半时将其拉回纵坐标为0的位置，重新滚动
                    oUl.style.top = "0";
                }
                oUl.style.top = oUl.offsetTop - 4 + "px";
            },100);
            
            oDiv.onmouseover = function(){
                clearInterval(scrollUp);
            }
            oDiv.onmouseout = function(){
                scrollUp = setInterval(function(){
                    if(oUl.offsetTop < -oUl.offsetHeight/2){
                        oUl.style.top = "0";
                    }
                    oUl.style.top = oUl.offsetTop - 4 + "px";
                },100);
            }
        }
    </script>

如果制作图片轮播向左偏移的效果，可以照葫芦画瓢，只需将height改为top等等

posted @ 2017-03-31 10:12  Western_Journalist  阅读(1325)  评论(0)  编辑  收藏  举报