JS를 사용하여 마스크 레이어 로그인 상자 및 커플릿 광고를 작성하고 자동으로 스크롤 막대를 따라 스크롤하여 사용자가 항상 볼 수 있도록 합니다. 알았어, 이제 늦었어, 더 이상 말도 안 돼, 코드가 매우 상세해 댓글을 달았으니 코드를 참조하세요. 코드 복사 코드는 다음과 같습니다. 越狱的囚徒 <br>#zhezhao{ /*遮罩层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ <br>position:absolute; <br>z-index:1000; <br>background:#ccc; <br>width:100%; <br>height:100%; <br>opacity: 0.8; <br>filter:alpha(opacity=80); <br>display:none; <br>} <br>#denglu{ /*登陆层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ <br>position:absolute; <br>z-index:2000; <br>width:100%; <br>height:200px; <br>margin:150px auto; <br>display:none; <br>} <br>#denglu table{ /*居中显示*/ <br>margin:auto; <br>} <br>.content{ <br>width:800px; <br>margin:0 auto; <br>} <br>#zuo{ /*这个是两边浮动的广告对联，一(左)一右*/ <br>position:absolute; <br>left:3px; <br>top:100px; <br>border:5px solid purple; <br>background:#ccc; <br>color:purple; <br>font-size:50px; <br>text-align:center; <br>height:200px; <br>width:85px; <br>z-index:2000; <br>} <br>#you{ /*这个是两边浮动的广告对联，一左一(右)*/ <br>position:absolute; <br>right:3px; <br>top:100px; <br>border:5px solid purple; <br>background:#ccc; <br>color:purple; <br>font-size:50px; <br>text-align:center; <br>height:200px; <br>width:85px; <br>z-index:2000; <br>} <br> <br>var h=0; <br>function fun1(){ //这里让登陆框 和 广告框 随着滚动条也自动滚动 保持一直可以让用户看到 <br>h=document.body.clientHeight; <br>document.getElementById('zhezhao').style.height=h+"px"; <br>window.onscroll=function(){ <br>//改变登录框的位置 <br>//获取滚动条离开上方的距离 <br>var t=document.body.scrollTop+document.documentElement.scrollTop;//兼容谷歌和火狐浏览器 <br>//把这个值，交给denglu这div的margin-top <br>document.getElementById('denglu').style.marginTop=150+t+"px"; <br><br>document.getElementById('zuo').style.top=100+t+"px"; <br>document.getElementById('you').style.top=100+t+"px"; <br>} <br>} <br>function show(){ //激活他们 <br>//遮罩层 <br>document.getElementById('zhezhao').style.display='block'; <br>//登录层 <br>document.getElementById('denglu').style.display='block'; <br>} <br>function hide(){ //隐藏他们 <br>//遮罩层 <br>document.getElementById('zhezhao').style.display='none'; <br>//登录层 <br>document.getElementById('denglu').style.display='none'; <br>} <br><br> 美女 帅哥 登录关闭 账号 test 登录 可以自己试一试 多完善下，这个还是比较好玩的。
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
