js implements the upward scrolling function imitating Jingdong Express-JS Tutorial-php.cn

js implements the upward scrolling function imitating Jingdong Express

小云云

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

Original

1661 people have browsed it

I saw that Jingdong Express website 7 has a very good scrolling function, so how can I imitate it? This article will share with you an example of scrolling up in imitation of Jingdong Express. It has good reference value and I hope it can help everyone.

Examples are as follows:

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

Copy after login

Related recommendations:

Use vue.js to imitate the selection component of JD.com’s three-level linkage between provinces and cities

An example of using JavaScript to imitate Taobao to achieve the magnifying glass effect

jquery Code sharing for imitation Jingdong product page

The above is the detailed content of js implements the upward scrolling function imitating Jingdong Express. For more information, please follow other related articles on the PHP Chinese website!