suchen

Heim >Web-Frontend >js-Tutorial >js erkennt, dass die Bildlaufleiste zu einer bestimmten Position scrollt und findet automatisch eine bestimmte tr_javascript-Technik

js erkennt, dass die Bildlaufleiste zu einer bestimmten Position scrollt und findet automatisch eine bestimmte tr_javascript-Technik

不言
不言Original
2018-05-28 14:15:405010Durchsuche

Um eine Tabelle mit Bildlaufleisten zu implementieren und ein bestimmtes Tr zu finden, ist es eigentlich sehr einfach, es mit nur wenigen Zeilen JS-Code zu vervollständigen. Der spezifische Inhalt ist wie folgt:

JS-Code

<strong><script type="text/javascript"> 
 function  test(){ 
    var $objTr = $("#location"); //找到要定位的地方  tr 
    $objTr.css("background-color","lightgray"); //设置要定位地方的css 
    var objTr = $objTr[0]; //转化为dom对象 
    $("#dataDiv").animate({scrollTop:objTr.offsetTop},"slow"); //定位tr 
  } 
</script></strong>

html

<body> 
    <h1>定位</h1> 
    <p id="dataDiv" style="overflow-x:hidden;overflow-y:auto;height:400px;width:450px;"> 
      <table id="tableId" style="width:400px;background-color:yellow" align="center" border="0"> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr <span style="color:#FF0000;">id="location"</span>><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
        <tr><td>dddddddddddd</td><td>dddddddddd</td><td>ddddddddddddddddd<td/><td>dddddsererfd</td></tr> 
      </table> 
  </p> 
  <input type="button" value="定位到一行" onclick="test()"/> 
 </body>

Obwohl es nur ein paar Codezeilen sind, müssen Sie es gründlich verstehen. Um sich wohl zu fühlen, müssen Sie mit der Verwendung von animate, scrollTop und der Bedeutung von .offsetTop vertraut sein.

1. Anleitung zur Verwendung von animate:

Die animate()-Methode führt benutzerdefinierte Animationen von CSS-Eigenschaftssätzen durch.

Diese Methode ändert ein Element durch CSS-Stile von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können. Es können nur numerische Werte animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“).

2. scrollTop

scrollTop-Attribut

In manchen Fällen übersteigt die Höhe des „Inhalts im Element“ die Höhe des „Elements selbst“. zum „Inhalt im Element“. Die Höhe des Teils des Elementinhalts, der die Obergrenzen des Elements überschreitet.

Erklärung: Der Höhenwert des inneren Elements beträgt 300 Pixel > Der Höhenwert des äußeren Elements beträgt 200 Pixel, daher kann der „Inhalt des äußeren Elements“ (dh des „inneren Elements“) nicht vollständig angezeigt werden, das äußere Element jedoch Der Überlauf ist auf „Auto“ eingestellt, sodass auf der rechten Seite des Ebenenelements ein vertikaler Schieberegler für das äußere Element angezeigt wird Im Anfangszustand fallen die „obere Grenze des inneren Elements“ und die „obere Grenze des äußeren Elements“ zusammen, und kein Inhalt überschreitet die „obere Grenze des äußeren Elements“. das scrollTop-Attribut ist 0.

Wenn der Bildlaufblock nach unten gezogen wird, nimmt der Inhalt, der die „obere Grenze des äußeren Elements“ überschreitet, allmählich zu, und der scrollTop-Wert entspricht der Höhe dieser überschüssigen Teile. Wenn der Bildlaufblock nach unten gezogen wird, fallen der „untere Rand des inneren Elements“ und der „untere Rand des äußeren Elements“ zusammen. Zu diesem Zeitpunkt überschreitet die Höhe des Inhalts den „oberen Rand des äußeren Elements“. = 300px-200px= 100px, was zu diesem Zeitpunkt der scrollTop-Wert ist.

3..offsetTop, offsetLeft usw.

Angenommen, obj ist ein HTML-Steuerelement.

obj.offsetTop bezieht sich auf die Position von obj von oben oder auf das obere Steuerelement, Ganzzahl, Einheitspixel.

obj.offsetLeft bezieht sich auf die Position von obj vom linken oder oberen Steuerelement, Ganzzahl, Einheitspixel.

obj.offsetWidth bezieht sich auf die Breite des obj-Steuerelements selbst, Ganzzahl, Einheitspixel.

obj.offsetHeight bezieht sich auf die Höhe des obj-Steuerelements selbst, Ganzzahl, Einheitspixel.

offsetParent

Die Eigenschaft offsetParent gibt einen Verweis auf ein Objekt zurück, das dem Element, das offsetParent aufruft, am nächsten liegt (das nächste in der enthaltenden Hierarchie) und ein Container ist, der mithilfe eines CSS-Elements positioniert wurde. Wenn dieses Containerelement nicht CSS-positioniert ist, ist der Wert des offsetParent-Attributs ein Verweis auf das Stammelement (HTML-Element im Standardkompatibilitätsmodus; Body-Element im seltsamen Rendering-Modus). Wenn style.display des Containerelements auf „none“ gesetzt ist (außer für IE und Opera), gibt die Eigenschaft offsetParent null zurück.

Syntax: parentObj = element.offsetParent

Variable: parentObj ist eine Referenz auf ein Element, in dem der Offset des aktuellen Elements berechnet wird.

css html NULL 整型 auto 字符串 JS 对象 display overflow margin background table tr
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
Vorheriger Artikel：jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jqueryNächster Artikel：jQuery simuliert eine 360-Grad-Diashow mit Browser-Bildschirmwechseleffekten (mit Demo-Quellcode-Download)_jquery

In Verbindung stehende Artikel

Mehr sehen