Maison > Article > interface Web > js se rend compte que la barre de défilement défile jusqu'à une certaine position et localise automatiquement une certaine technique tr_javascript
js se rend compte que la barre de défilement défile jusqu'à une certaine position et localise automatiquement une certaine technique tr_javascript
- 不言original
- 2018-05-28 14:15:404935parcourir
Pour implémenter un tableau avec des barres de défilement et localiser un certain tr, c'est en fait très simple. Cela peut être complété avec seulement quelques lignes de code js. Le contenu spécifique est le suivant
code js<.>
<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> Bien qu'il ne s'agisse que de quelques lignes de code, vous devez le comprendre parfaitement. Vous devez être familier avec l'utilisation d'animate, de scrollTop et la signification de .offsetTop pour être à l'aise. 1. Instructions d'utilisation d'animate : La méthode animate() effectue des animations personnalisées des ensembles de propriétés CSS. Cette méthode fait passer un élément d'un état à un autre via les styles CSS. Les valeurs des propriétés CSS changent progressivement, vous permettant de créer des effets animés.
Seules les valeurs numériques peuvent être animées (par exemple "margin:30px"). Les valeurs de chaîne ne peuvent pas être animées (telles que « background-color:red »). 2. scrollTop attribut scrollTop Dans certains cas, la hauteur du "contenu dans l'élément" dépassera la hauteur de "l'élément scrollTop lui-même". au "contenu de l'élément". La hauteur de la partie du contenu de l'élément qui dépasse les limites supérieures de l'élément. Explication :
La valeur de hauteur de l'élément interne est 300px > La valeur de hauteur de l'élément externe est 200px, donc le "contenu de l'élément externe" (c'est-à-dire "l'élément interne") ne peut pas être entièrement affiché et l'élément externe a le débordement est réglé sur auto, donc l'élément extérieur Un curseur vertical apparaîtra sur le côté droit de l'élément de calque
Dans l'état initial, la « limite supérieure de l'élément interne » et la « limite supérieure de l'élément externe » coïncident l'une avec l'autre, et aucun contenu ne dépasse la « limite supérieure de l'élément externe ». l'attribut scrollTop est 0. Lorsque le bloc de défilement est déplacé vers le bas, le contenu qui dépasse la "limite supérieure de l'élément externe" augmentera progressivement et la valeur scrollTop est égale à la hauteur de ces parties excédentaires.
Lorsque le bloc de défilement est déplacé vers le bas, la « bordure inférieure de l'élément interne » et la « bordure inférieure de l'élément externe » coïncident. À ce moment, la hauteur du contenu dépasse la « bordure supérieure de l'élément externe ». = 300px-200px= 100px, qui est la valeur scrollTop à ce moment. 3..offsetTop, offsetLeft, etc. Supposons que obj soit un contrôle HTML. obj.offsetTop fait référence à la position de l'obj par le haut ou au contrôle supérieur, entier, pixel unité. obj.offsetLeft fait référence à la position de obj à partir du contrôle gauche ou supérieur, entier, pixel unité. obj.offsetWidth fait référence à la largeur du contrôle obj lui-même, entier, pixel unité. obj.offsetHeight fait référence à la hauteur du contrôle obj lui-même, entier, pixel unité. offsetParent La propriété offsetParent renvoie une référence à un objet qui est le plus proche de l'élément appelant offsetParent (le plus proche dans la hiérarchie contenant) et est un conteneur qui a été positionné à l'aide d'un élément CSS. Si cet élément conteneur n'est pas positionné CSS, la valeur de l'attribut offsetParent est une référence à l'élément racine (élément html en mode de compatibilité standards ; élément body en mode de rendu bizarre). Lorsque le style.display de l'élément conteneur est défini sur "aucun" (sauf pour IE et Opera), la propriété offsetParent renvoie null. Syntaxe : parentObj = element.offsetParent Variable : parentObj est une référence à un élément, dans lequel le décalage de l'élément actuel est calculé. Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery simule un diaporama d'effet de commutation d'écran de navigateur 360 (avec téléchargement du code source de démonstration)_jqueryArticle suivant：jQuery simule un diaporama d'effet de commutation d'écran de navigateur 360 (avec téléchargement du code source de démonstration)_jquery
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript