js滑动门效果
一、什么是滑动门
大家在网页中经常会见到这样一种导航效果,因为使用频率广泛,所以广大的程序员给它起了一个名字,叫做滑动门.在学习滑动门之前,首先你要了解什么是滑动门。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #tab{ width: 600px; height: 500px; border: 2px solid darkblue; margin: 50px auto; position: relative; } #tab ul li{ list-style: none; width: 200px; height: 50px; float: left; line-height: 50px; text-align: center; font-size: 20px; } #tab .nk{ width: 580px; height: 430px; position: absolute; top: 60px; left: 10px; } </style> <script type="text/javascript"> window.onload = function(){ var tab = document.getElementById('tab'); var lis = tab.getElementsByTagName('li'); var nk = tab.getElementsByClassName('nk'); for (y=0;y<lis.length;y++) { lis[y].xh = y; lis[y].onmouseover = function(){ for (y=0;y<nk.length;y++) { nk[y].style.display = 'none'; } nk[this.xh].style.display = 'block'; } } } </script> </head> <body> <div id="tab"> <ul> <li style="background: darkcyan;">国内</li> <li style="background: darkgoldenrod;">国外</li> <li style="background: darkgreen;">综合</li> </ul> <div class="nk" style="background: darkcyan; z-index: 3;"></div> <div class="nk" style="background: darkgoldenrod;"></div> <div class="nk" style="background: darkgreen;"></div> </div> </body> </html> 代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知