div下a标签超出文字向左滚动怎么实现

ICanFly_ 2014-10-17 01:35:35

div有固定的宽高想让里边a标签的文字如果超出了自动向左滚动到div左边的那条边儿后再回到原来的位置重新开始滚动
怎么实现啊啊啊!!!

...全文

554 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2014-10-17

打赏
举报

在线演示。代码演示：


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        *{ margin:0; padding:0;}
        body{font:12px/1 '微软雅黑';background: #fff;}
        .wrap{ width:140px; padding:10px;}
        .info{ padding-top:10px; overflow:hidden;}
        .inner{ width:1000px;height:172px; height:17px; line-height:17px; overflow:hidden;}
        .inner p{ display:inline-block;}
    </style>
</head>
<body>
<div class="wrap">
    <div class="img"><img src="http://dummyimage.com/140x90/" alt=""/></div>
    <div id="info" class="info">
        <div class="inner">
            <p class="txt">文字如果超出了自动向左滚动</p>
        </div>
    </div>
</div>
<script>
    function scroll(){
        var info = document.getElementById('info');
        var div = info.getElementsByTagName('div')[0];
        var p = document.getElementsByTagName('p')[0];
        var p_w = p.offsetWidth;
        var div_w = info.offsetWidth;
        if(div_w > p_w){ return false; }
        div.innerHTML += div.innerHTML;

        setInterval(function(){
            if(p_w <= info.scrollLeft){
                info.scrollLeft -= p_w;
            } else {
                info.scrollLeft++;
            }
        }, 30);
    }
    scroll();


</script>
</body>
</html>

ICanFly_ 2014-10-17