html - javascript horizontal scroll text - Stack Overflow|江阴雨辰互联

I want horizontal scroll on my app. there are multiple example, but I found one that fit my need. But when i try it it just don't work as it should. please look and tell me what the problem is:

<!DOCTYPE html>
<html>
<head>
<style>
div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}
</style>
<script>
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
</script>
</head>
<body>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

</body>
</html>

update There is no error in console:

I want horizontal scroll on my app. there are multiple example, but I found one that fit my need. But when i try it it just don't work as it should. please look and tell me what the problem is:

<!DOCTYPE html>
<html>
<head>
<style>
div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}
</style>
<script>
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
</script>
</head>
<body>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

</body>
</html>

update There is no error in console:

Share Improve this question edited Jul 22, 2016 at 13:36 asked Jul 22, 2016 at 13:25 dmx 1,9904 gold badges29 silver badges51 bronze badges

Well.... you could use the old <marquee> tag. – Gavin Thomas Commented Jul 22, 2016 at 13:28
4 @GavinThomas it's not 1998 ;) <marquee> is obsolete, don't use it – Brett Gregson Commented Jul 22, 2016 at 13:29
1) Don't use setInterval for animations except for patibility with old browsers, requestAnimationFrame and CSS animations are more reliable. 2) Looking up and setting properties like text-indent and width every frame is bad for performance, transforms are better. 3) Do you really need a marquee? ;) – gcampbell Commented Jul 22, 2016 at 13:30
Yes a know but I want to display multiple texts so I want to use javascript to change div contain. – dmx Commented Jul 22, 2016 at 13:31
What errors do you get in the console? And even if you are loading jQuery (which you appear not to be doing in your example), you're executing your JavaScript before the elements have been rendered to the page. You either would need to move your code to the end of the page or wrap in a loader like document.ready. Do that and it works fine jsfiddle/j08691/z01czdyg – j08691 Commented Jul 22, 2016 at 13:31

| Show 2 more ments

2 Answers 2

Sorted by: Reset to default 4

You forgot to include jQuery in your website. Otherwise, it works as expected (at least I think so).

$(document).ready(function() {
    var marquee = $('div.marquee');
    console.log(marquee);
    marquee.each(function() {
        var mar = $(this),indent = mar.width();
        mar.marquee = function() {
            indent--;
            mar.css('text-indent',indent);
            if (indent < -1 * mar.children('div.marquee-text').width()) {
                indent = mar.width();
            }
        };
        mar.data('interval',setInterval(mar.marquee,1000/60));
    });
});

div.marquee {
    white-space:no-wrap;
    overflow:hidden;
}
div.marquee > div.marquee-text {
    white-space:nowrap;
    display:inline;
    width:auto;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='marquee'>
    <div class='marquee-text'>
        Testing this marquee function
    </div>
</div>

Edit: added $(document).ready() to ensure that elements will be loaded.

Edit2: if you want the text to scroll from left to right, use the following script:

$(document).ready(function() {
    var marquee = $('div.marquee');
    console.log(marquee);
    marquee.each(function() {
        var mar = $(this),indent = mar.width();
        mar.marquee = function() {
            indent++;
            mar.css('text-indent',indent);
            if (indent > marquee.width()) {
                indent = -1 * mar.children('div.marquee-text').width();
            }
        };
        mar.data('interval',setInterval(mar.marquee,1000/60));
    });
});

Wait page load before execute script.

<script>
$(document).ready(function(){
var marquee = $('div.marquee');
console.log(marquee);
marquee.each(function() {
    var mar = $(this),indent = mar.width();
    mar.marquee = function() {
        indent--;
        mar.css('text-indent',indent);
        if (indent < -1 * mar.children('div.marquee-text').width()) {
            indent = mar.width();
        }
    };
    mar.data('interval',setInterval(mar.marquee,1000/60));
});
});
</script>

so see this question, and dont forget <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script> in headers.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744273689a4566226.html

html - javascript horizontal scroll text - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

html - javascript horizontal scroll text - Stack Overflow

2 Answers 2

相关推荐