>> 知识广场

div+css+js实现类似marquee的无缝滚动代码示例

分类：JS 作者：myerob 标签：div css js 实现 类似 marquee 无缝 滚动 代码 示例 阅读：311 收藏
导读：
程序圈朋友，marquee无缝滚动想必大家都有见过，本文介绍了div+css+js,实现下类似的滚动且兼容firefox，喜欢的朋友加收藏。用marquee实现首尾相连循环滚动效果代码： <ma…

程序圈朋友，marquee无缝滚动想必大家都有见过，本文介绍了div+css+js,实现下类似的滚动且兼容firefox，喜欢的朋友加收藏。

用marquee实现首尾相连循环滚动效果代码：

<marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"
scrollamount="3" width="100" onmouseover="this.stop();" onmouseout="this.start();">
    这里是要滚动的内容
</marquee>

用div+css+js实现首尾相连循环滚动效果代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
        <title>
            div+css+javascript 实现无缝滚动,marquee无缝滚动，无缝滚动,兼容firefox
        </title>
        <style type="text/css">
            #scrollobj { white-space: nowrap; overflow: hidden; width: 500px; }
        </style>
    </head>
    
    <body>
        <div id="scrollobj" onmouseover="javascript:_stop();" onmouseout="javascript:_start();">
            这里是要滚动的内容
        </div>
        <script language="javascript" type="text/javascript">
            < !--
            function scroll(obj) {

                /*往左*/
                var tmp = (obj.scrollLeft)++;
                //当滚动条到达右边顶端时 
                if (obj.scrollLeft == tmp) {
                    obj.innerHTML += obj.innerHTML;
                }
                //当滚动条滚动了初始内容的宽度时滚动条回到最左端 
                if (obj.scrollLeft >= obj.firstChild.offsetWidth) {
                    obj.scrollLeft = 0;
                }

                /*往上*/
                //var tmp = (obj.scrollTop)++; 
                //if (obj.scrollTop == tmp) { 
                // obj.innerHTML += obj.innerHTML; 
                //} 
                //if (obj.scrollTop >= obj.firstChild.offsetWidth) { 
                // obj.scrollTop = 0; 
                //} 
            }
            var _timer = setInterval("scroll(document.getElementById('scrollobj'))", 20);
            function _stop() {
                if (_timer != null) {
                    clearInterval(_timer);
                }
            }
            function _start() {
                _timer = setInterval("_scroll(document.getElementById('scrollobj'))", 20);
            }
            //--> 
            
        </script>
    </body>

</html>

 

 

相关推荐