Maison > Article > interface Web > Exemple d'imitation des compétences de défilement up_javascript de Jingdong Express

Exemple d'imitation des compétences de défilement up_javascript de Jingdong Express

韦小宝original: 2017-12-15 11:01:421387parcourir

L'éditeur ci-dessous partagera avec vous un exemple de js qui imite le défilement vers le haut de Jingdong Express et fournit le code source de js ! Les étudiants intéressés par js peuvent jeter un œil au code source. J'espère qu'il sera utile à tout le monde. Suivons l'éditeur et jetons un œil

Les exemples sont les suivants :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<p id="broadcast" class="bar" name="giftactive">
<p style="float:left"><strong>间隔滚动效果：</strong></p>
<p id="demo" style="overflow:hidden;height:22px;line-height:22px;">
<ul class="mingdan" id="holder">
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">aaaaaa</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">bbbbbb</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">cccccc</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">dddddd</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank">eeeeee</a></li>
</ul>
</p>
</p>
<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-22px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}

$(document).ready(function() {
setInterval(&#39;AutoScroll("#demo")&#39;, 1000)
});
</script>
</body>
</html>

L'exemple ci-dessus d'imitation du défilement vers le haut de JD Express est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence ! !

Recommandations associées :

Analyse d'exemples de tri par sélection et de tri par insertion de tri à bulles JS

Méthode js pour obtenir la taille de l'image téléchargée localement par le front-end

Méthode js setinterval pour modifier la période d'exécution

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Explication détaillée de la différence entre webpack require.ensure et require les compétences AMD_javascriptArticle suivant：Explication détaillée de la différence entre webpack require.ensure et require les compétences AMD_javascript

Articles Liés

Voir plus