js 페이지 사 이 드 페이지 스크롤 광고 효과 구현

a.scrollTop 의 계산;b.스크롤 요소 의 포 지 셔 닝 값 계산;c.스크롤 주기 설정;코드 는 다음 과 같 습 니 다:css 부분:

 
/*      */ 
body{ height:3000px;} 
div,ul,li,body{margin:0; padding:0;} 
/*position:absolute;       */ 
#roll{width:50px; height:100px; background:#99CC00; position:absolute;}

Html 코드:

 
<body> 
<div id="roll"></div> 
</body>

JS 코드:

 
var roll=document.getElementById('roll'), 
initX=0, 
initY, 
compY, 
sp=15, 
//       ，       ，  IE     ； 
timeGap=5, 
doc=document.documentElement, 
docBody=document.body; 
compY=initY=200; 
roll.style.right=initX+"px"; 
;(function(){ 
var curScrollTop=(doc.scrollTop||docBody.scrollTop||0)-(doc.clientTop||docBody.clientTop||0); 
//  comP      ；  roll.style.top===doc.scrollTop+initY； 
compY+=(curScrollTop+initY-compY)/sp; 
roll.style.top=Math.ceil(compY)+"px"; 
setTimeout(arguments.callee,timeGap); 
})();

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

원생 Js 페이지 스크롤 지연 로드 이미지 실현 원리 및 과정

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

js 페이지 사 이 드 페이지 스크롤 광고 효과 구현

좋은 웹페이지 즐겨찾기