Home > Article > Web Front-end > Example of imitating Jingdong Express scrolling up_javascript skills

Example of imitating Jingdong Express scrolling up_javascript skills

韦小宝Original: 2017-12-15 11:01:421378browse

The editor below will share with you an example of js that imitates Jingdong Express scrolling upward, and provides js source code! Students who are interested in js can take a look at the source code. I hope it will be helpful to everyone. Let’s follow the editor and take a look.

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

The above example of imitating the scrolling up of Jingdong Express is all the content shared by the editor. I hope it can give you a reference! !

Related recommendations:

JS Bubble Sort Selection Sort and Insertion Sort Example Analysis

js method to get the size of the image uploaded locally by the front end

js setinterval method to modify the running time period

The above is the detailed content of Example of imitating Jingdong Express scrolling up_javascript skills. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skillsNext article：Detailed explanation of the difference between webpack require.ensure and require AMD_javascript skills

See more

Example of imitating Jingdong Express scrolling up_javascript skills

Related articles