Example of imitating Jingdong Express scrolling up_javascript skills-JS Tutorial-php.cn

Example of imitating Jingdong Express scrolling up_javascript skills

韦小宝

Release： 2017-12-15 11:01:42

Original

1425 people have browsed it

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>

Copy after login

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!