Native js는 타오바오 홈페이지_javascript 스킬에 버튼을 눌렀을 때 천천히 상위로 돌아가는 효과를 구현합니다.-JS 튜토리얼-php.cn

Native js는 타오바오 홈페이지_javascript 스킬에 버튼을 눌렀을 때 천천히 상위로 돌아가는 효과를 구현합니다.

WBOY

풀어 주다： 2016-05-16 16:53:10

원래의

1762명이 탐색했습니다.

타오바오 홈페이지의 백투톱 버튼은 다음과 같습니다. 버튼을 일정 거리까지 끌어내릴 때까지 버튼이 표시되지 않습니다. 버튼 위에 마우스를 올려놓으면 버튼 배경이 회색으로 바뀌고 아이콘이 텍스트로 변경됩니다. 버튼을 클릭하면 천천히 상위로 돌아갑니다

먼저 이러한 효과를 얻으려면 어떤 이벤트를 추가해야 하는지 분석해 보겠습니다. 마우스가 버튼 안팎으로 움직이면 버튼의 동작이 변경되므로 버튼에 mouseover 및 mouseout 이벤트를 추가해야 합니다. 스크롤 막대의 변경 사항을 수신하려면 창에 스크롤 이벤트를 추가하고 버튼을 클릭하여 맨 위로 돌아가고 버튼에 클릭 이벤트를 추가해야 합니다. 이벤트 핸들러를 moveIn, moveOut, goTop의 세 가지 함수로 캡슐화합니다.

html/css 코드는 아래에 나와 있습니다

코드 복사 코드는 다음과 같습니다.

주 콘텐츠, 높이는 2000px

코드 복사 다음 :

.container { 너비: 980px; 여백: 0 자동; 높이: 자동; 배경: #aaa;} 
.content { 높이: 2000px; 테두리: 1px 
#btn { 
위치:고정; 
오른쪽: 0; 
높이: 55px; png ) no-repeat 0 -110px; } //배경 이미지를 마음대로 찾을 수 있습니다 
font-size: 12px; 
line-height: 55px 
text-align: center; text- indent: -9999em; 
cursor: 포인터 
display: none; 

 
다음은 전체 js 코드입니다


 🎜>코드 복사

코드는 다음과 같습니다.

window.addEventListener("load",function() { var btn = document.getElementById( "btn"); btn.addEventListener("mouseover", moveIn, false) btn.addEventListener("mouseout", moveOut, false)

function moveIn() {

btn.style.color = "#ffffff"; //수정된 인라인 스타일이 가장 높은 우선순위를 가집니다. 
btn.style.textIndent = "0em" 
btn.style.BackgroundImage = "none"; 🎜> btn.style.BackgroundColor = "#FF4401"; 
} 
function moveOut() { 
btn.style.textIndent = "-9999em" 
btn.style.BackgroundImage = "url (icons .png)"; 
} 

function goTop(acceleration, time) { //맨 위로 돌아가는 속도를 조정하도록 매개변수를 수정합니다. 
acceleration = 가속도 || 0.1; 
time = 시간 | 10; 
var speed = 1 가속; 
function getScrollTop() { //스크롤 막대의 수직 거리를 가져옵니다
return document.documentElement.scrollTop || scrollTop; 
} 
function setScrollTop(value) { //스크롤 막대의 수직 거리를 설정합니다. 효과를 얻기 위한 핵심은 짧은 간격 내에 스크롤 막대의 수직 거리를 지속적으로 수정하는 것입니다. 스크롤 효과 
document.documentElement.scrollTop = value; 
} 
window.onscroll = function() { 
var scrollTop() 
if (scrollTop > 100) { //스크롤 막대가 창 상단에서 얼마나 떨어져 있는지 판단할 때 표시됩니다. 여기서는 100px입니다. 
btn.style.display = "block" 
} else; { 
btn.style.display = "없음"; 
} 
}; 
btn.onclick = function() { 
var 타이머 = setInterval(function() { 
setScrollTop (Math.floor(getScrollTop() / speed)) ; //이 코드 줄이 핵심입니다. 스크롤 막대의 수직 거리를 가져와 속도로 나눈 다음 스크롤 막대까지의 수직 거리를 설정합니다. >if (getScrollTop() == 0) 
clearInterval(timer); 
} 
} 
goTop(0.2, 8)}; false) 

 
물론 다른 구현 방법도 있습니다. 다른 방법의 주요 코드는 아래에 나와 있습니다. 




 코드 복사 
 

 코드는 다음과 같습니다. 

 

btn.onclick = function() {
clearInterval(timer)
var 타이머 = setInterval(function() {

var now = scrollTop; //스크롤 막대 수직 거리speed = (0 - 현재) / 10; speed = Math.floor(speed) if (now == 0); 🎜>clearInterval(timer); document.documentElement.scrollTop = 현재 속도; //document.body.scrollTop = 현재 속도가 있는 브라우저}, 15) ;

}

Native js는 타오바오 홈페이지_javascript 스킬에 버튼을 눌렀을 때 천천히 상위로 돌아가는 효과를 구현합니다.

여기 코드는 주로 인터넷의 다른 리소스를 참조하며, 제가 이해한 내용을 약간 추가합니다. 물론 JavaScript가 가장 일찍 지원한 window.scrollTo()와 같은 다른 구현 방법도 있습니다. jQ를 사용하여 구현한다면 코드의 양은 매우 작아질 것입니다. w3cplus

를 참고하시면 됩니다. 개인적으로 데이터 유형, 클로저, 상속 등을 파악하는 등 네이티브 JavaScript를 먼저 잘 배워야 한다고 생각합니다. , 범위, DOM, CSS 및 이벤트 처리, Ajax 등. 다른 프레임워크에 익숙해지면 훨씬 쉽게 배울 수 있습니다.