求指导 jQuery 文字跑马灯效果-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

求指导 jQuery 文字跑马灯效果

2016-03-11 16:28:15 2321 1

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

<div>
    <span><span>
    <span class="cloned"><span>
</div>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 18:59:33
    <!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>
    0 0
相关问答

11

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 64425浏览量 回答数 11

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57005浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 157751浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 93849浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 147274浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 146069浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 85387浏览量 回答数 23

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 80487浏览量 回答数 13

14

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 67763浏览量 回答数 14

3

回答

Nginx—owncloud安装记事

寒喵 2014-06-07 23:24:41 48754浏览量 回答数 3
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载