suchen

Heim >Web-Frontend >js-Tutorial >js implementiert die Aufwärts-Scroll-Funktion, die Jingdong Express imitiert

js implementiert die Aufwärts-Scroll-Funktion, die Jingdong Express imitiert

小云云
小云云Original
2017-12-14 09:31:351709Durchsuche

Ich habe gesehen, dass die Jingdong Express-Website 7 eine sehr gute Scrollfunktion hat. Wie kann ich das also nachahmen? Dieser Artikel wird Ihnen ein Beispiel für das Hochscrollen in Anlehnung an Jingdong Express zeigen. Er hat einen guten Referenzwert und ich hoffe, dass er allen helfen kann.

Beispiele sind wie folgt: 


<!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>

Verwandte Empfehlungen:

Verwenden Sie vue.js, um die Auswahlkomponente der dreistufigen Verknüpfung zwischen Provinzen und Städten von JD.com zu imitieren

Ein Beispiel für die Verwendung von JavaScript zur Nachahmung von Taobao, um das zu erreichen Lupeneffekt

Jquery-Nachahmung des Jingdong-Produktseitencode-Sharings

Das obige ist der detaillierte Inhalt vonjs implementiert die Aufwärts-Scroll-Funktion, die Jingdong Express imitiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS, Canvas zeichnet einen Kegel-ImplementierungscodeNächster Artikel：JS, Canvas zeichnet einen Kegel-Implementierungscode

In Verbindung stehende Artikel

Mehr sehen