js implementiert die Aufwärts-Scroll-Funktion, die Jingdong Express imitiert-js-Tutorial-php.cn

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

小云云

Freigeben： 2017-12-14 09:31:35

Original

1707 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!