开发者社区> 问答> 正文

求指导 jQuery 文字跑马灯效果

你这个思路没问题啊,一段文字都放在span里面,span包在一个div里,div的宽高固定,样式设置正确后,改变span的位置实现滚动,剩下的就是计算了(没敲代码,就大概想了一下,觉得可行)。

<div>
    <span><span>
    <span class="cloned"><span>
</div>

展开
收起
a123456678 2016-03-11 16:28:15 2861 0
1 条回答
写回答
取消 提交回答
  • <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>js文字向左无缝滚动</title>
    </head>
    
    <body>
        <style type="text/css">
        .qimo8 {
            margin: 0 auto;
            overflow: hidden;
            width: 200px;
        }
        
        .qimo8 .qimo {
            width: 200%;
            height: 30px;
        }
        
        .qimo8 .qimo div {
            float: left;
        }
        
        .qimo8 .qimo ul {
            float: left;
            height: 30px;
            overflow: hidden;
            zoom: 1;
        }
        
        .qimo8 .qimo ul li {
            float: left;
            line-height: 30px;
            list-style: none;
        }
        
        .qimo8 li a {
            margin-right: 10px;
            color: #444444;
        }
        </style>
        <div>
            <div id="demo" class="qimo8">
                <div class="qimo">
                    <div id="demo1">
                        <ul class="loop">
                            <li>2016年第一盏祝福之灯</li>
                        </ul>
                    </div>
                    <div id="demo2"></div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
        var demo = document.getElementById("demo");
        var demo1 = document.getElementById("demo1");
        var demo2 = document.getElementById("demo2");
        demo2.innerHTML = document.getElementById("demo1").innerHTML;
    
        function Marquee() {
            if (demo.scrollLeft - demo2.offsetWidth >= 0) {
                demo.scrollLeft -= demo1.offsetWidth;
            } else {
                demo.scrollLeft++;
            }
        }
        var myvar = setInterval(Marquee, 30);
        demo.onmouseout = function() {
            myvar = setInterval(Marquee, 30);
        }
        demo.onmouseover = function() {
            clearInterval(myvar);
        }
        </script>
    </body>
    
    </html>
    2019-07-17 18:59:33
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
3D动画的菜谱式灯光与云渲染 立即下载
低代码开发师(初级)实战教程 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载