Exemple d'imitation des compétences de défilement up_javascript de Jingdong Express-js tutoriel-php.cn

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

韦小宝

Libérer： 2017-12-15 11:01:42

original

1417 Les gens l'ont consulté

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>

Copier après la connexion

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!