ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して次のスクロール バッファ モーション広告ボックスを完成させるにはどうすればよいですか?
JavaScript を使用して次のスクロール バッファ モーション広告ボックスを完成させるにはどうすればよいですか?
- 黄舟オリジナル
- 2017-07-17 11:30:172152ブラウズ
この記事では主に詳しく紹介しますJavaScript次のスクロールバッファモーション広告フレームの実装、ページの左側と右側の広告フレームに従う、一定の基準値があり、興味のある友人はそれを参照できます
一部を閲覧する Web ページを表示すると、スクロール バーをスクロールすると、ページの端に広告画像が表示されます (ここでは広告ボックスと呼びます)。一部の Web ページの広告フレームはブラウザ上で固定されており、これは background:fixed; を使用することで実現できます。ここでは JavaScript を使用して、スクロール バッファーとともに移動する広告ボックスを単純に作成しました。
制作原理は比較的単純です。誰もが完璧な JS モーション フレームワークを持っており、これをモーションのバッファリングに使用する必要があります。ここでの広告ボックスは、スクロールバーのバッファの動きに追従してブラウザの中央位置に移動するように設定されています。理解する必要があるのは、移動距離の計算といくつかの詳細の処理 (一部のバグの防止) です
これは、ここで使用する JS 移動フレームワークです。渡されるパラメーターは 1 つだけであり、完璧な移動フレームワークではありません。 。渡されたパラメータは広告枠の移動距離なので、移動枠内で再度オブジェクトを取得します。
var timer=null;
function startMover(iTarget){
var op=document.getElementById('p1');
clearInterval(timer);
timer=setInterval(function(){
var ispeed=(iTarget-op.offsetTop)/8;
//速度设置为逐渐减小
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
//避免速度产生小数点
if(op.offsetTop==iTarget){
clearInterval(timer);
}
else{
op.style.top=op.offsetTop+ispeed+"px";
}
},30);
};スタイルとレイアウトコード
<style>
#p1{
width: 100px;
height: 100px;
background: #ccc;
position: absolute;
//使用绝对定位让其处于右上方
right: 0;
top: 0;
</style>
<body style="height: 2000px;">
<p id="p1"></p>
</body>jsコード
.onscroll属性はここに追加されており、スクロールバーがスクロールされたときに広告ボックスがスクロールバーと一緒に移動できるようにすることです。 。広告ボックスが常にブラウザの中央位置に移動することを実現したいため、.onresize 属性も追加しました。ただし、ブラウザの高さを変更すると、広告の移動も実現する必要があります。ボックスなので、サイズが変更されたときにブラウザーが読み込まれたときにこの属性を追加します。
<script>
window.onload=window.onscroll=window.onresize=function(){
var op=document.getElementById('p1');
var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
"scrolltop"是滚动条滚动的距离，这里有一个兼容chrome不支持document.documentElement.scrollTop获取语句，其他浏览器支持。
var t=(document.documentElement.clientHeight-op.offsetHeight)/2;
"t"为让广告框处于中间位置的高度距离，（获取浏览器的总高度-广告框自身高度）/2
startMover(parseInt(t+scrolltop));
"parseIn"返回一个整数，避免小数生成。这里广告框的总移动距离为（t+scrolltop）
};
var timer=null;
function startMover(iTarget){
var op=document.getElementById('p1');
clearInterval(timer);
timer=setInterval(function(){
var ispeed=(iTarget-op.offsetTop)/8;
ispeed=ispeed>0?Math.ceil(ispeed):Math.floor(ispeed);
if(op.offsetTop==iTarget){
clearInterval(timer);
}
else{
op.style.top=op.offsetTop+ispeed+"px";
}
},30);
};
</script>スクロールバーがメニューの位置までスクロールしたとき、ブラウザの上部に固定する方法と、スクロールバーが元の位置に戻ったときにそこで止まります。
インターネット上の多くの人は jquery プラグインを参照する必要があり、非常に面倒に感じます。
そのようなエフェクトを記述するにはどうすればよいですか?
jQueryプラグインを直接参照するよりも自分でデバッグする方が面倒なので、みんなで次々とプラグインを使っていきます
ユーザーのスクロールを判定するにはonscrollイベントを使います。位置を決定し、メニュー要素の offsetTop 属性を使用してその表示位置を決定します
メニューの一番上までスクロールした場合、次のメニューが特定の適切な位置にスクロールすると、メニューの表示が固定に変更されます
。元のメニューの表示を元に戻し、新しいメニューを固定に変更します
以上がJavaScript を使用して次のスクロール バッファ モーション広告ボックスを完成させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。