> 웹 프론트엔드 > JS 튜토리얼 > 페이지에 Node.js 웹페이지 측면 스크롤 광고 효과 적용

페이지에 Node.js 웹페이지 측면 스크롤 광고 효과 적용

高洛峰
풀어 주다: 2017-02-04 14:26:08
원래의
1593명이 탐색했습니다.

a.ScrollTop 계산
b.스크롤 요소의 위치 지정 값 계산
c.스크롤 주기 설정
코드는 다음과 같습니다.

/*测试用的高度*/ 
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(&#39;roll&#39;), 
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); 
})();
로그인 후 복사

더 많은 js 웹페이지 횡스크롤 광고 효과 구현 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿