Taobaoは、ブラウザウィンドウのイベントを使用するページ縮小プロセス中に中央の製品列を非表示にします
window.addEventListener('resize'、function(){})
このイベントは、ブラウザウィンドウが変更されるたびにトリガーされます。window.innerWidthは、現在のブラウザのページ幅です。
window.addEventListener('resize',function(){
console.log(window.innerWidth);
})
ドラッグブラウザウィンドウが変更されると、コンソール出力のブラウザ幅が変更されていることがわかります。
この点で、淘宝網と同じ原理の事例を完成させることができます。
ウィンドウ幅が950未満の場合、中央の黄色のボックスを非表示にします
<script>
window.addEventListener('DOMContentLoaded',function(){
var center=document.querySelector('.center')
window.addEventListener('resize',function(){
if(innerWidth< 950){
center.style.display='none';
}else{
center.style.display='block';
}
})
})
</script>
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</body>
ブラウザのウィンドウ幅が951の場合でも、3つのボックスはすべて表示されます。
ブラウザのウィンドウ幅が950未満の場合、中央のボックスが非表示になり、Taobao.comの効果が得られます。