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

韦小宝
풀어 주다: 2017-12-15 11:01:42
원래의
1390명이 탐색했습니다.

아래 편집자는 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처럼 스크롤한 예시는 모두 에디터가 공유한 내용입니다. 다들 참고하세요! !


관련 권장 사항:

JS 버블 정렬 선택 정렬 및 삽입 정렬 예시 분석

js 프런트 엔드에서 로컬로 업로드한 이미지의 크기 가져오기

js setinterval 실행 수정 기간 방법

위 내용은 Jingdong Express 스크롤 up_javascript 기술 모방의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿