집 > 기사 > 웹 프론트엔드 > 위아래 스크롤 알림 효과를 달성하기 위한 10줄의 js 코드

위아래 스크롤 알림 효과를 달성하기 위한 10줄의 js 코드

小云云원래의: 2018-05-15 16:45:524624검색

이 기사에서는 롤링 알림 효과를 얻기 위해 10줄의 js 코드를 사용하는 방법에 대한 관련 정보를 주로 소개합니다. 이 기사에서는 모든 사람의 학습이나 업무에 대한 특정 참조 및 학습 가치가 있는 예제 코드를 통해 이를 매우 자세히 소개합니다. 필요하신 분은 아래를 따라가서 함께 살펴보세요. 그것이 모두에게 도움이 되기를 바랍니다.

Requirements

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

Solution

빌드 a p 먼저 레이어는 공지사항 목록(ul)을 감싸는 공지사항 표시 영역 역할을 하며, CSS

공지사항 게시판 표시 영역의 높이(35px)와 각 공지사항의 높이를 고정합니다. 메시지(li)도 이 높이여야 합니다(여기서는 게으르기 때문에 행 높이만 사용합니다). 이 값은 나중에 js에서 사용됩니다.

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

3. JavaScript

는 통지업.js

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

지식 포인트:

1. animate 콜백 함수 animate 함수 실행 완료 후 실행할 함수입니다.

2.appendTo() 메소드

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

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

 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;
}

4. 캡슐화 기능 호출

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

타이머 setInterval을 사용하여 공지 정보 표시 시간 간격을 제어합니다. milliseconds

/*
* 参数说明
* 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);
 })
}

어때요 좋으면 빨리 모아보세요.

위아래 스크롤 알림 효과를 달성하기 위한 10줄의 js 코드

관련 기사