JQuery 기반 숫자 변경 애니메이션 효과 - counter_jquery로 사용 가능
May 16, 2016 pm 06:21 PM
생기
요구 사항이 동적이기 때문에 위치 변경을 고려하여 이전에 사용했던 JQuery를 생각하고 모든 효과를 시도한 후 최종적으로 애니메이션 사용자 정의를 선택했습니다.
코드 복사 코드는 다음과 같습니다.
<html>
<head> title>testAnimate< /title>
<script type="text/javascript">
functionchangeNum(n) { //n을 변경하려는 숫자로 설정
$(function () {
$("counter").animate({ top: ' =20px', opacity: '0' }, "slow", function () { //숫자가 아래로 이동하여 사라지도록 합니다. Top은 요소와 웹 페이지 상단 사이의 거리는 투명도이며 값은 0~1입니다.
document.getElementById("counter").innerHTML = n; //숫자가 사라지면 n으로 변경됩니다. . 웹 페이지에 ID가 counter인 범위 요소가 있습니다. 이 코드는 animate 안에 넣어야 합니다. 그렇지 않으면 숫자가 사라지기 전에 해당 값이 변경됩니다.
})
.animate({ top: '-= 40px' }, "slow") //숫자 n이 원래 위치 위로 점프합니다
.animate({ top: ' =20px', opacity: '1' }, "slow") //숫자 n이 나타납니다. 불투명도가 0이면 개체가 완전히 투명해지거나 사라집니다.
})
}
</ 스크립트>
</head>
<span id="counter ">1</span>
</html > 블로그파크를 처음 사용하는데, 틀린 부분이 있으면 지적해주세요.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
2 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
Repo : 팀원을 부활시키는 방법
4 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
헬로 키티 아일랜드 어드벤처 : 거대한 씨앗을 얻는 방법
3 몇 주 전
By 尊渡假赌尊渡假赌尊渡假赌
스플릿 소설을이기는 데 얼마나 걸립니까?
3 몇 주 전
By DDD
R.E.P.O. 파일 저장 위치 : 어디에 있고 그것을 보호하는 방법은 무엇입니까?
3 몇 주 전
By DDD
뜨거운 기사 태그
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
Gmail 이메일의 로그인 입구는 어디에 있나요?
7313
9
7313
9
자바 튜토리얼
1625
14
1625
14
Cakephp 튜토리얼
1348
46
1348
46
라라벨 튜토리얼
1260
25
1260
25
PHP 튜토리얼
1207
29
1207
29
Windows 11에서 애니메이션 효과 속도를 높이는 방법: 2가지 방법 설명
Apr 24, 2023 pm 04:55 PM
Windows 11에서 애니메이션 효과 속도를 높이는 방법: 2가지 방법 설명
![PowerPoint에서 애니메이션이 작동하지 않음 [수정됨]](https://img.php.cn/upload/article/000/887/227/170831232982910.jpg?x-oss-process=image/resize,m_fill,h_207,w_330)
2년의 연기 끝에 국내 3D 애니메이션 영화 '얼랑선:심해룡'이 7월 13일 개봉 예정이다.
Jan 26, 2024 am 09:42 AM
2년의 연기 끝에 국내 3D 애니메이션 영화 '얼랑선:심해룡'이 7월 13일 개봉 예정이다.
메인 애니메이션 '아크나이트: 윈터 히든 리턴(Arknights: Winter Hidden Return)' 최종 PV가 공개, 10월 7일 개봉 예정이다.
Sep 23, 2023 am 11:37 AM
메인 애니메이션 '아크나이트: 윈터 히든 리턴(Arknights: Winter Hidden Return)' 최종 PV가 공개, 10월 7일 개봉 예정이다.
