js implémente la fonction de défilement vers le haut imitant Jingdong Express-js tutoriel-php.cn

js implémente la fonction de défilement vers le haut imitant Jingdong Express

小云云

Libérer： 2017-12-14 09:31:35

original

1708 Les gens l'ont consulté

J'ai vu que le site Web 7 de Jingdong Express a une très bonne fonction de défilement, alors comment puis-je l'imiter ? Cet article partagera avec vous un exemple de défilement vers le haut à l'imitation de Jingdong Express. Il a une bonne valeur de référence et j'espère qu'il pourra aider tout le monde.

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

Recommandations associées :

Utilisez vue.js pour imiter le composant de sélection du lien à trois niveaux de JD.com entre les provinces et les villes

Un exemple d'utilisation de JavaScript pour imiter Taobao pour atteindre l'objectif effet loupe

Partage de code de la page produit Jquery imitation Jingdong

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!