滚动显示友情链接

标签：

1、原理：利用  overflow: hidden;属性只显示一行，调整scrollTop达到滚动目的

<style type="text/css">
.linkDiv {
  width: 870px;
  height: 20px;
  line-height: 20px;
  float: left;
  overflow: hidden;
}
</style>
<div class="friendLink">
    <h3>友情链接：</h3>
    <div id="flink" class="linkDiv">
                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#/" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
        <span>|</span>                <a href="#" target="_blank">滚动显示</a>
                    </div>
</div><br/>
<h3>ddddd</h3>
<script type="text/javascript">
    var fscroll = document.getElementById("flink");
    var fheight = fscroll.scrollHeight;
    //fscroll.innerHTML += fscroll.innerHTML;
    function friendScroll() {
        fscroll.scrollTop ++;
        if(fscroll.scrollTop >= fscroll.scrollHeight-20) fscroll.scrollTop=0;
    }
    var MyMar=window.setInterval(friendScroll,100);
    fscroll.onmouseover=function() {clearInterval(MyMar)};
    fscroll.onmouseout=function() {MyMar=setInterval(friendScroll,100)};
</script>

滚动显示友情链接

标签：

原文地址：http://my.oschina.net/lantianbaiyun/blog/490574