HTML Marquee alternatives [closed]

问题

Absolute beginner here. Literally just started messing with HTML last week.

I'm trying to come up with a some kind of marquee effect that can be put into html coding on a website. We have a basic HTML marquee set up, but it is jumpy and difficult to read. I have no idea where to go with this.

回答1:

You can use jQuery to archieve the result of marquee.

look here: http://plugins.jquery.com/marquee/ and here: http://aamirafridi.com/jquery/jquery-marquee-plugin#examples

As mentioned: dont ever use marquee

google search for "marquee jquery" lists a lot of results

回答2:

There is no simple alternative to marquee. If you want to find a standard solution you have to be an expert javascript programmer and instead of a simple html tag you have to go to many many lines of code.

Most standard Web browser supports it (except for Google Chrome it fails to render it to the standard of marquee).

For Chrome (and chrome only needs that) you could use this javascript code ... you don't need to use this for (IE, Edge, Mozilla, Opera...etc)

var oMarquees = [], oMrunning,
        oMInterv =        20,     //interval between increments
        oMStep =          1,      //number of pixels to move between increments
        oStopMAfter =     0,     //how many seconds should marquees run (0 for no limit)
        oResetMWhenStop = false,  //set to true to allow linewrapping when stopping
        oMDirection =     'right'; //'left' for LTR text, 'right' for RTL text

/***     Do not edit anything after here     ***/
function doMStop() {
        clearInterval(oMrunning);
        for( var i = 0; i < oMarquees.length; i++ ) {
                oDiv = oMarquees[i];
                if( oResetMWhenStop ) {
                        oDiv.mchild.style.cssText = oDiv.mchild.style.cssText.replace(/;white-space:nowrap;/g,'');
                        oDiv.mchild.style.whiteSpace = '';
                        oDiv.style.height = '';
                        oDiv.style.overflow = '';
                        oDiv.style.position = '';
                        oDiv.mchild.style.position = '';
                        oDiv.mchild.style.top = '';
                }
        }
        oMarquees = [];
}
function doDMarquee() {
        if( oMarquees.length || !document.getElementsByTagName ) { return; }
        var oDivs = document.getElementsByTagName('div');
        for( var i = 0, oDiv; i < oDivs.length; i++ ) {
                oDiv = oDivs[i];
                if( oDiv.className && oDiv.className.match(/\bdmarquee\b/) ) {
                        if( !( oDiv = oDiv.getElementsByTagName('div')[0] ) ) { continue; }
                        if( !( oDiv.mchild = oDiv.getElementsByTagName('div')[0] ) ) { continue; }
                        oDiv.mchild.style.cssText += ';white-space:nowrap;';
                        oDiv.mchild.style.whiteSpace = 'nowrap';
                        oDiv.style.height = oDiv.offsetHeight + 'px';
                        oDiv.style.overflow = 'hidden';
                        oDiv.style.position = 'relative';
                        oDiv.mchild.style.position = 'absolute';
                        oDiv.mchild.style.top = '0px';
                        oDiv.mchild.style[oMDirection] = (oDiv.mchild.style[oMDirection] == '')?(oDiv.offsetWidth + 'px'):oDiv.mchild.style[oMDirection];
                        oMarquees[oMarquees.length] = oDiv;
                        i += 2;
                }
        }
        oMrunning = setInterval('aniMarquee()',oMInterv);
        if( oStopMAfter ) { setTimeout('doMStop()',oStopMAfter*1000); }
}
function aniMarquee() {
        var oDiv, oPos;
        for( var i = 0; i < oMarquees.length; i++ ) {
                oDiv = oMarquees[i].mchild;
                oPos = parseInt(oDiv.style[oMDirection]);
                if( oPos <= -1 * oDiv.offsetWidth ) {
                        oDiv.style[oMDirection] = oMarquees[i].offsetWidth + 'px';
                } else {
                        oDiv.style[oMDirection] = ( oPos - oMStep ) + 'px';
                }
        }
}
if( window.addEventListener ) {
        window.addEventListener('load',doDMarquee,false);
} else if( document.addEventListener ) {
        document.addEventListener('load',doDMarquee,false);
} else if( window.attachEvent ) {
        window.attachEvent('onload',doDMarquee);
}

回答3:

My advice would be to use a carousel instead. The user has more control over it, as the carousel can be stopped and started on a mouse click.

Material Design carousel here: http://materializecss.com/carousel.html

来源：https://stackoverflow.com/questions/26360339/html-marquee-alternatives

标签

html

marquee