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:421336parcourir
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('AutoScroll("#demo")', 1000)
});
</script>
</body>
</html>
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!