JavaScript は、screen_javascript スキルのバッファリング効果を備えたスクロールおよびフローティング広告コードを実装します。-jsチュートリアル-php.cn

JavaScript は、screen_javascript スキルのバッファリング効果を備えたスクロールおよびフローティング広告コードを実装します。

WBOY

リリース： 2016-05-16 15:33:31

オリジナル

1291 人が閲覧しました

この記事の例では、JavaScript が画面上でのバッファリング効果を備えたスクロールおよびフローティング広告コードを実装する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

これは、画面とともに常にスクロールする JavaScript コードのデモです。特にフローティング広告を好む一部のウェブマスターは、このコードをフローティング広告として使用することがよくあります。訪問者がいつでもどこでも Web サイトのナビゲーションを制御できるように、画面とともにスクロールするメニュー。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

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 プログラミングのすべての人に役立つことを願っています。