recherche

Maison >interface Web >js tutoriel >js implémente la fonction de défilement vers le haut imitant Jingdong Express

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

小云云
小云云original
2017-12-14 09:31:351674parcourir

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>

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!

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：JS, Canvas dessine un code d'implémentation de côneArticle suivant：JS, Canvas dessine un code d'implémentation de cône

Articles Liés

Voir plus