js를 사용하여 위아래로 스크롤 공지를 구현하는 방법

이 글에서는 롤링 알림 효과를 얻기 위해 10줄의 js 코드를 사용하는 방법에 대한 관련 정보를 주로 소개합니다. 이 글에서는 예제 코드를 통해 이를 자세히 소개합니다. 공부나 업무에 필요한 모든 사람에게 도움이 되는 학습 가치가 있습니다. 따라갈 수 있습니다. 편집자와 함께 살펴보겠습니다.

Requirements

최근 프로젝트에서는 다음과 같이 게시판의 스크롤 표시 효과를 구현해야 합니다.

Solution

1.

먼저 공지사항으로 p 레이어 구축 표시 영역에는 공지사항 목록(ul)이 포함되어 있습니다.

<p class="notice">
 <ul>
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
 </ul>
</p>

2, CSS

공지사항 게시판 표시 영역의 높이(35px)와 각 공지사항 메시지의 높이(li)가 고정됩니다. 또한 이 높이여야 합니다(여기에서는 게으른 경우 행 높이를 사용했습니다). 이 값은 나중에 js에서 사용됩니다.

 p,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
 width: 300px;/*单行显示，超出隐藏*/
 height: 35px;/*固定公告栏显示区域的高度*/
 padding: 0 30px;
 background-color: #b3effe;
 overflow: hidden;
}
.notice ul li {
 list-style: none;
 line-height: 35px;
 /*以下为了单行显示，超出隐藏*/
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

3. JavaScript

캡슐화 함수 통지업.js

jquery animate 메서드를 사용하여 목록 ul의 marginTop 값을 변경하여 스크롤 효과를 얻습니다.

지식 포인트:

1. 애니메이트 기능이 실행되고, 실행될 기능입니다.

2.appendTo() 메소드

는 선택한 요소의 끝에(여전히 내부에) 지정된 내용을 삽입합니다.

참고: 지정된 콘텐츠가 현재 페이지의 특정 요소인 경우 해당 요소는 원래 위치에서 사라집니다. 간단히 말해서 이는 복사 작업이 아닌 이동 작업에 해당합니다.

/*
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
 $(obj).animate({
 marginTop: top
 }, time, function () {
 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
 })
}

4. 캡슐화 기능 호출

먼저 jQuery 라이브러리와 자체 캡슐화 플러그인을 소개합니다.

타이머 setInterval을 사용하여 알림 정보 표시 시간 간격을 제어합니다. 이 경우에는 2000밀리초입니다. 위 내용은 제가 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

관련 기사:

JS를 사용하여 작은 공의 포물선 궤적 운동을 구현하는 방법

JS에서 웹 버전의 계산기를 구현하는 방법

URL에서 # 기호를 제거하는 방법 Angular2(자세한 튜토리얼)

Javascript에서 클래스, 생성자 및 팩토리 함수를 사용하는 방법

Vue.js에서 모바일 구성 요소 라이브러리를 사용하는 방법(자세한 튜토리얼)

위 내용은 js를 사용하여 위아래로 스크롤 공지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!