Jingdong Express 스크롤 up_javascript 기술 모방의 예-JS 튜토리얼-php.cn

Jingdong Express 스크롤 up_javascript 기술 모방의 예

韦小宝

풀어 주다： 2017-12-15 11:01:42

원래의

1370명이 탐색했습니다.

아래 편집자는 Jingdong Express의 상향 스크롤을 모방하고 js소스 코드를 제공하는 js의 예를 여러분과 공유할 것입니다! js에 관심이 있는 학생들은 소스코드를 살펴보시면 모두에게 도움이 되길 바랍니다. 에디터를 따라가서 살펴보겠습니다.

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

로그인 후 복사

위의 Jingdong Express처럼 스크롤한 예시는 모두 에디터가 공유한 내용입니다. 다들 참고하세요! !