搜技巧 | 只提供最简单有效的方法与技巧

分享简单实用的方法与技巧
当前位置:搜技巧 > 网站开发 >


HTML内容或图片实现无缝滚动技巧

  我们知道要让HTML页面的内容或图片实现无缝滚动,可以使用 marquee 这个简单的标签,不过这标签的最大问题就是不能首尾相连(无缝)滚动。

marquee效果

  那么,使用 DIV + JS 就可以轻松实现无缝滚动。

  1) DIV代码:

             <div id="scrollobj" style="overflow:hidden;height: 955%;width: 952%;">
                 <volist name="comment" id="vo">
                 <p>
                     <font style="color:#E63A63">{$vo.username}</font>
                     <br />
                     {$vo.request}
                 </p>
                 </volist>
             </div>

  2) JS代码:

             <script language="javascript" type="text/javascript">
                    function scroll(obj) {
                    var tmp = (obj.scrollTop)++;
                    //当滚动条到达顶端时
                    if (obj.scrollTop==tmp) obj.innerHTML += obj.innerHTML;
                    //当滚动条滚动了初始内容的宽度时滚动条回到最顶端
                    if (obj.scrollTop>=obj.firstChild.offsetWidth) obj.scrollTop=0;
                    }
                    setInterval("scroll(document.getElementById('scrollobj'))",20);
             </script>

  3) 实现的效果:

div+js无缝滚动
分享:
跋山涉水找红包 扫码省钱 不如扫码省点钱

相关推荐