윤방도 - 문자의 위아래 방향이 자동으로 미끄러진다
4550 단어 애니메이션
<div class="weather-info">
<ul>
<li>Shandong ZiBo</li>
<li>cloud</li>
<li>80ºF</li>
<li>15Km/h</li>
</ul>
</div>
css
.weather-info{ width: 300px; height: 40px； overflow: hidden; background-color:red; }
li{ height: 30px; list-style: none; line-height: 30px; font-size: 15px; color: #ffffff; font-family:Arial; overflow: hidden; }
1.ul에 높이를 설정하지 않고 바깥의div - 리(li)를 숨기기 편하고 매번 애니메이션에 리(li)만 나타날 수 있습니다.\2.리 라벨의 높이를 div의 높이보다 조금 작게 조절하여 애니메이션의 아름다움을 보증합니다
function weather(obj) {
$(obj).find("ul").animate({
marginTop:"-30px",
},1000,function () {
$(this).css({marginTop:'0.1px'}).find("li:first").appendTo(this);
})
}
$(function () {
var num=$(".weather-info").find('li').length;
if(num>1){
setInterval('weather(".Info-weather")',2000)
}
})1. 첫 번째 함수는 윤방 애니메이션을 정의한다.두 번째 함수는 타이머를 정의하고 애니메이션을 참조합니다.animate: 우선'marginTop:'- 30px'를 실행하고 l을 30px로 위로 이동합니다. 과정은 1s시간입니다. 애니메이션이 실행된 후에 함수를 실행합니다. l을 제자리로 이동하고 이미 올라간 첫 번째 li 라벨을 마지막 li 라벨에 넣습니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
SwiftUI에서 Lottie를 사용하여 풍부한 애니메이션을 쉽게 실현해보세요이하의 기사를 이전 썼지만, 최근 SwiftUI를 사용해 Lottie를 이용했으므로 그 방법에 대해서 써 간다. Lottie에 관한 설명은 여러가지 기사에서도 되고 있으므로 여기서는 언급하지 말고, SwiftUI상에...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
