JavaScript는 screen_javascript 기술에 버퍼링 효과가 있는 스크롤 및 플로팅 광고 코드를 구현합니다.-JS 튜토리얼-php.cn

JavaScript는 screen_javascript 기술에 버퍼링 효과가 있는 스크롤 및 플로팅 광고 코드를 구현합니다.

WBOY

풀어 주다： 2016-05-16 15:33:31

원래의

1234명이 탐색했습니다.

이 기사의 예에서는 JavaScript가 화면에 버퍼링 효과를 주는 스크롤 및 플로팅 광고 코드를 구현하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

다음은 항상 화면과 함께 스크롤되는 JavaScript 코드의 데모입니다. 특히 플로팅 광고를 좋아하는 일부 웹마스터는 이 코드를 플로팅 광고로 자주 사용합니다. 방문자가 언제 어디서나 웹사이트 탐색을 제어할 수 있도록 화면과 함께 스크롤되는 메뉴입니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/

구체적인 코드는 다음과 같습니다.

<html>
<head>
<title>随屏滚动</title>
<style type="text/css"> 
*{padding:0;margin:0;}
html{height:100%;}
body{height:200%;}
.box{position:absolute;width:100px;height:100px;background:#ccc}
</style>
</head>
<body>
<div class="box" id="box1" style="top:0;left:0;">AD1</div>
<div class="box" id="box2" style="top:0;right:0;">AD2</div>
</body>
<script type="text/javascript"> 
var id=function(o){return document.getElementById(o)}
var scroll=function (o){
 var space=id(o).offsetTop;
 id(o).style.top=space+'px';
 void function(){
   var goTo = 0;
   var roll=setInterval(function(){
    var height =document.documentElement.scrollTop+document.body.scrollTop+space;
    var top = parseInt(id(o).style.top);
    if(height!= top){
     goTo = height-parseInt((height - top)*0.9);
     id(o).style.top=goTo+'px';
    }
    //else{if(roll) clearInterval(roll);}
   },50);
 }()
}
scroll('box1');
scroll('box2');
</script>
</html>

로그인 후 복사

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.