计算机毕业设计 毕业设计,计算机毕业设计,ASP.NET毕业设计,课程设计,大网站,信誉高,售后完善,本站作品全部包修改,包远程调试,包辅导讲解,包答辩。
您现在的位置: 做设计网 >> 常见技术问题
常见技术问题

js实现左右无缝隙滚动

做设计网 www.dosj.net  更新时间:2016/2/18 23:40:39
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>分别用marquee和div+js实现首尾相连循环滚动效果</title>
</head>
<body>
    用marquee实现首尾相连循环滚动效果(仅IE):<br />
    <br />
    <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"
        scrollamount="3" width="100"><SPAN unselectable="on">这里是要滚动的内容</SPAN></marquee>
    <br />
    <br />
    用DIV+javascript实现首尾相连循环滚动效果(兼容firefox):<br />
    <br />
    <div id="scrollobj" style="white-space: nowrap; overflow: hidden; width: 500px;">
        <span>这里是要滚动的内容</span></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;
        }
        setInterval("scroll(document.getElementById('scrollobj'))", 20);
//-->
    </script>
</body>
</html>
相关成品
相关知识
  • 在线咨询
  • QQ:254846639
  • QQ:254846639
  • 技术支持
  • 售后服务