Verschieben von Text (Marquee)_Erfahrungsaustausch-CSS-Tutorial-php.cn

Heim

Web-Frontend

CSS-Tutorial

Verschieben von Text (Marquee)_Erfahrungsaustausch

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 12:10 PM

Marquee-Tag wird verwendet, um Text innerhalb des verfügbaren Browserbereichs zu scrollen. Dieses Tag gilt nur für IE3 und spätere Versionen des Browsers.
Format:
MARQUEE ALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…" "
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
GN: Wird zum Drücken der Schaltfläche verwendet. Richtet den Lauftext auf einen angegebenen Wert aus. Die für ALIGN einstellbaren Werte sind: LEFT, CENTER, RIGHT, TOP und BOTTOM. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
Dieser Lauftext ist auf die obere Ausrichtung eingestellt Lassen Sie den Browser den Text gemäß der festgelegten Methode verarbeiten. Wenn die Methode auf SLIDE eingestellt ist, wird der Text auf das Dokument verschoben und bleibt an den Rändern. Bei der Einstellung ALTERNATE bewegt sich der Text von einer Seite zur anderen. Bei Einstellung auf SCROLL wird der Text wiederholt auf der Seite gescrollt. Dieses Attribut ist nicht erforderlich. Die einstellbaren Werte sind: SILIDE, ALTERNATE, SCROLL.
Beispiel:
Text bewegt sich von einer Seite zur anderen Die Hintergrundfarbe kann im RGB-, Hexadezimalwertformat oder Farbnamen eingestellt werden.
Beispiel:
Der Hexadezimalwert setzt die Hintergrundfarbe des Lauftexts auf Rot.
　Verwendet RGB zum Festlegen die Hintergrundfarbe des Lauftextes auf Rot MARQUEE> RICHTUNG: Wird verwendet, um die Richtung des Textlaufs festzulegen. Die Werte sind: LINKS, RECHTS. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
🎜>　
HÖHE: Wird verwendet, um die Höhe der rollenden Untertitel festzulegen. Die Höhe kann in Pixeln oder als Prozentsatz der sichtbaren Seite ausgedrückt werden. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
Die Höhe beträgt 12 Pixel
Diese Eigenschaft ist nicht erforderlich.
Beispiel:
Die Breite beträgt 200 Pixel
Diese Eigenschaft ist nicht erforderlich.
Beispiel:
, leerer Raum wird in Pixel ausgedrückt. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
. Wenn der Wert von LOOP „INFINITE“ oder „-1“ ist, wird der Text unbegrenzt gescrollt. Diese Eigenschaft ist nicht erforderlich.
Beispiel:

　
　SCROLLAMOUNT: Wird verwendet, um das Intervall hinter jedem fortlaufenden Lauftext festzulegen. Das Intervall wird in Pixel ausgedrückt. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
Intervallzeit in Millisekunden. Diese Eigenschaft ist nicht erforderlich.
Beispiel:
Wird verwendet, um die Maus so einzustellen, dass sie den Bildlauf fortsetzt, wenn sie sich aus dem Bereich bewegt
ONMOUSEOVER=this.stop(): Wird verwendet, um die Maus so einzustellen, dass sie den Bildlauf stoppt, wenn sie sich in den Bereich bewegt
Javascript implementiert kontinuierliches Scrollen

</div>
<div id="demo2"></div>
</div>

[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ] Klassisches Scrollen von Forennachrichten

[Strg+A Alle auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Code kopieren Der Code lautet wie folgt:

var marqueeContent=new Array();
marqueeContent[0]='刷新列表';
    CALL online_users
    sql = "SELECT O.userName,U.realName FROM TBL_ONLINE O left join TBL_USER U on O.userName=U.userName ORDER BY O.loginTime DESC"
    Set rs = conn.execute(sql)
    If NOT (rs.eof AND rs.bof) Then
        count=1
        do while not rs.eof
%>
marqueeContent[]='">';
            count=count+1
        loop
    End If
    rs.close
    set rs=nothing
    conn.close
    set conn=nothing
%>

function marquee_init() { 
    var obj_unit = obj_marquee.firstChild; 
    var n = Math.ceil(parseInt(obj_marquee.style.height) / obj_unit.offsetHeight); 
    for(var i=0; i<n; i++) obj_marquee.appendChild(obj_unit.cloneNode(true)); 
    return; 
}

function marquee_show() { 
    var marquee_high = parseInt(obj_marquee.style.height); 
    var step = marquee_high/10; 
    if(obj_marquee.scrollTop >= obj_marquee.children[1].offsetTop) { 
        obj_marquee.scrollTop = 0; 
        marquee_show(); 
        return; 
    } 
    obj_marquee.scrollTop += step; 
    if(step_c++ < 9) setTimeout("marquee_show()", 50); 
    return; 
}

marquee_init(); 
setInterval("step_c=0;setTimeout('marquee_show()',50)", marquee_spd);

</script>

<table style="border:1px black solid;"><tr><td> 
<div id="marquee" style="overflow:hidden;height:60px;width:210px;border:0px;padding:0px;"> 
  <div style="border:0px;padding:0px"> 
     
    <div style="height:60px;width:210px;font-size:12px"> 
      <a href="http://www.kdt.cn/kdt/introduce.php"><img  src="/static/imghwm/default1.png" data-src="http://www.blueidea.com/gg/kdt/206.gif?x-oss-process=image/resize,p_40" class="lazy" border="0"   style="max-width:90%" alt="Verschieben von Text (Marquee)_Erfahrungsaustausch" ></a> 
      这个是广告~~~~~~~~~ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <a href="http://www.idc2008.com/index5.htm"><img  src="/static/imghwm/default1.png" data-src="http://www.blueidea.com/gg/idc2008/208X33.gif?x-oss-process=image/resize,p_40" class="lazy" border="0"   style="max-width:90%" alt="Verschieben von Text (Marquee)_Erfahrungsaustausch" ></a> 
      这个也是广告~~~~~~~~~~~~~~~~ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <a href="http://www.qycity.com/"><img  src="/static/imghwm/default1.png" data-src="http://www.blueidea.com/gg/qycity/blueidea.gif?x-oss-process=image/resize,p_40" class="lazy" border="0"   style="max-width:90%" alt="Verschieben von Text (Marquee)_Erfahrungsaustausch" ></a> 
      这个怎么还是广告？？？？？？ 
    </div> 
    <div style="height:60px;width:210px;font-size:12px"> 
      <a href="http://bbs.blueidea.com/profile-username-windy2000.html"><img  src="" border="0" alt="Verschieben von Text (Marquee)_Erfahrungsaustausch" > Windy2000</a>
 
      也给自己做个广告~~~~~~~~~~ 
    </div> 
     
  </div> 
</div> 
</td></tr></table>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

function reportError(msg,url,line) { 
    var str = "You have found an error as below: \n\n"; 
    str += "Err: " + msg + " on line: " + line; 
    alert(str); 
    return true; 
}

window.onerror = reportError;

var obj_marquee = document.getElementById("marquee"); 
var repeat = null; 
var marquee_spd = 50;

function marquee_init() { 
    var obj_unit = obj_marquee.firstChild; 
    var marquee_high = parseInt(obj_marquee.style.height); 
    var marquee_wide = parseInt(obj_marquee.style.width); 
    var unit_high = obj_unit.offsetHeight; 
    var unit_wide = obj_unit.offsetWidth; 
    var m = 0, n = 0, i = 0; 
    var tmp = null; 
     
    m = Math.ceil(marquee_wide / unit_wide); 
    n = Math.ceil(marquee_high / unit_high);

obj_unit.style.width = marquee_wide * (m+1); 
    obj_unit.rows[0].cells[0].style.width = obj_marquee.style.width; 
     
    for(i=0; i<m; i++) { 
        tmp = obj_unit.rows[0].insertCell(-1); 
        tmp.innerHTML = obj_unit.rows[0].cells[0].innerHTML; 
        tmp.style.width = marquee_wide; 
        tmp = null; 
    }

for(i=0; i<n; i++) { 
        obj_marquee.appendChild(obj_unit.cloneNode(true)); 
    }

return; 
}

function marquee_doit() { 
    var direction = ""; 
    direction = obj_marquee.getAttribute("direction"); 
    if(direction != null) marquee_show(direction); 
    direction = obj_marquee.getAttribute("direction2"); 
    if(direction != null) marquee_show(direction); 
    return; 
}

marquee_init(); 
repeat = setInterval("marquee_doit()",marquee_spd);

marquee.onmouseover = function() {clearInterval(repeat);} 
marquee.onmouseout = function() {repeat=setInterval("marquee_doit()",marquee_spd);} 
</script>

<table style="border:1px black solid;"><tr><td> 
<div id="marquee" direction="up" style="overflow:hidden;height:200px;width:250px"> 
  <table style="border:0px;padding:0px;"><tr><td> 
     
    <a href="#" target="_blank">经典论坛</a>
 
    <a href="#" target="_blank">163.com</a>
 
    <a href="#" target="_blank">21cn.com</a>
 
    <a href="#" target="_blank">Happy new year</a> 
     
  </td></tr></table> 
</div> 
</td></tr></table>Richtung1:
<input type="button" value="↑" onclick="obj_marquee.direction='up'">
<input type="button" value="↓" onclick="obj_marquee.direction='down'">
<input type="button" value="←" onclick="obj_marquee.direction='left'">
<input type="button" value="→" onclick="obj_marquee.direction='right'">
<input type="button" value=" X " onclick="obj_marquee.direction=''">

Richtung2:
<input type="button" value="↑" onclick="obj_marquee.direction2='up'">
<input type="button" value="↓" onclick="obj_marquee.direction2='down'">
<input type="button" value="←" onclick="obj_marquee.direction2='left'">
<input type="button" value="→" onclick="obj_marquee.direction2='right'">
<input type="button" value=" X " onclick="obj_marquee.direction2=''">

[Strg+A, um alle auszuwählen. Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie es aktualisieren, um es auszuführen ]

Stellungnahme

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Verwandter Artikel

Nächstes Level CSS -Styling für CursorApr 23, 2025 am 11:04 AM

Benutzerdefinierte Cursoren mit CSS sind großartig, aber wir können die Dinge mit JavaScript auf die nächste Stufe bringen. Mit JavaScript können wir zwischen Cursorzuständen wechseln, dynamischen Text in den Cursor platzieren, komplexe Animationen anwenden und Filter anwenden.

Worlds Collide: Keyframe -Kollisionserkennung mit Style -AbfragenApr 23, 2025 am 10:42 AM

Interaktive CSS -Animationen mit Elementen, die sich gegenseitig abprallen, scheinen im Jahr 2025 plausibler zu sein. Obwohl es unnötig ist, eine Pong in CSS zu implementieren

Verwendung von CSS-Hintergrund-Filter für UI-EffekteApr 23, 2025 am 10:20 AM

Tipps und Tricks zur Verwendung der CSS Backdrop-Filter-Eigenschaft, um Benutzeroberflächen zu stylen. Sie lernen, wie Sie Hintergrundfilter zwischen mehreren Elementen schichten, und integrieren sie in andere grafische CSS -Effekte, um aufwändige Designs zu erstellen.

Lächeln?Apr 23, 2025 am 09:57 AM

Nun, es stellt sich heraus, dass die integrierten Animationsfunktionen von SVG nie wie geplant veraltet waren. Sicher, CSS und JavaScript sind mehr als in der Lage, die Ladung zu tragen, aber es ist gut zu wissen, dass Smil nicht wie zuvor im Wasser tot ist

'Hübsch' ist im Auge des BetrachtersApr 23, 2025 am 09:40 AM

Yay, let ' S sprung für Textschreiber: Pretty Landing in Safari Technology Preview! Aber achten Sie darauf, dass es sich von der Art und Weise unterscheidet, wie es in Chrombrowsern funktioniert.

CSS-Tricks Chronicles xliiiApr 23, 2025 am 09:35 AM

Dieses CSS-Tricks-Update zeigt erhebliche Fortschritte im Almanac, den neuesten Podcast-Auftritten, einem neuen CSS-Leitfaden und der Hinzufügung mehrerer neuer Autoren, die wertvolle Inhalte beitragen.

Die @Apply -Funktion von Rückenwind ist besser als es klingtApr 23, 2025 am 09:23 AM

Meistens präsentieren die Leute die @Apply-Funktion mit einer der einzelnen Properschafts-Dienstprogramme von Rückenwind (die eine einzelne CSS-Deklaration ändert). Wenn @Apply auf diese Weise präsentiert wird, klingt er überhaupt nicht vielversprechend. Also obvio

Ich habe das Gefühl, dass ich keine Veröffentlichung habe: eine Reise in Richtung vernünftiger BereitstellungenApr 23, 2025 am 09:19 AM

Das Bereitstellen wie ein Idiot hängt von einer Missverhältnis zwischen den Tools, mit denen Sie zur Bereitstellung verwendet werden, und der Belohnung in der Komplexität im Vergleich zu Komplexität hinzu.

See all articles