js+css打造绝对经典资讯网站选项卡滑动切换特效，当用户的鼠标经过时立即切换下拉文章列表显示，可根据自己的需求来修改。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js+css打造经典资讯网站滑动门切换特效_武鸣人</title>
<style type="text/css">
<!--
*{padding:0; margin:0}
img{border:0; display:block;}
BODY {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
}
.dis_wuming_ren {
DISPLAY: block
}
.undis_wuming_ren {
DISPLAY: none
}
#cntr_wuming {
WIDTH: 302px
}
#wuming {
CLEAR: both; MARGIN-BOTTOM: 16px
}
#wuming P {
FLOAT: left; LINE-HEIGHT: 21px
}
#wuming P.top_wuming {
FONT-WEIGHT: bold; WIDTH: 117px
}
#wuming P.topwuming {
BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
}
#wuming P.top_wuming_1 {
BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
}
#wuming #wuming_tit {
BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
}
#wuming #wuming_cnt {
PADDING-LEFT: 32px; BACKGROUND: url(/img/20240420_www_wuming_ren_15.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
}
#wuming #wuming_cnt A {
COLOR: #666; TEXT-DECORATION: none
}
#wuming #wuming_cnt A:hover {
COLOR: #c2130e; TEXT-DECORATION: underline
}
-->
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<DIV id="cntr_wuming">
<DIV id="wuming">
<DIV id="wuming_tit">
<P class="top_wuming">武鸣人</P>
<P class="topwuming">国内</P>
<P class="topwuming">国际</P>
<P class="topwuming">社会</P>
<P class="topwuming">网评</P>
</DIV>
<DIV id="wuming_cnt">
<SPAN title="武鸣人提示您，不要删除这行"></SPAN>
<SPAN>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很酷的JavaScript图片放大效果</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="https://www.wuming.ren" target="_blank">...more</A></div>
</SPAN>
<SPAN>
<A href="https://www.wuming.ren" target="_blank">很酷的JavaScript图片放大效果</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很酷的JavaScript图片放大效果</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="https://www.wuming.ren" target="_blank">...more</A></div>
</SPAN>
<SPAN>
<A href="https://www.wuming.ren" target="_blank">仿天极网首页幻灯图片切换特效</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="https://www.wuming.ren" target="_blank">仿天极网首页幻灯图片切换特效</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">仿天极网首页幻灯图片切换特效</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="https://www.wuming.ren" target="_blank">...more</A></div>
</SPAN>
<SPAN>
<A href="https://www.wuming.ren" target="_blank">非常炫的图片特效，响应鼠标变化</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">非常炫的图片特效，响应鼠标变化</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">复选框全选、全不选的Javascript代码</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">非常炫的图片特效，响应鼠标变化</A><BR>
<A href="https://www.wuming.ren" target="_blank">很实用的对联广告代码（自适应高度）</A><BR>
<A href="https://www.wuming.ren" target="_blank">可拖动、关闭及最小化的层拖动窗口</A><BR>
<div align="right"><A href="https://www.wuming.ren" target="_blank">...more</A></div>
</SPAN>
</DIV>
<SCRIPT>
var Tags = document.getElementById('wuming_tit').getElementsByTagName('p');
var TagsCnt = document.getElementById('wuming_cnt').getElementsByTagName('span');
var len = Tags.length;
var flag = 1; //修改默认值
for (i = 1; i < len; i++) {
Tags[i].value = i;
Tags[i].onmouseover = function() { change_wuming(this.value) };
TagsCnt[i].className = 'undis_wuming_ren';
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
Tags[flag].className = 'top_wuming_1';
TagsCnt[flag].className = 'dis_wuming_ren';
function change_wuming(v) {
Tags[flag].className = 'topwuming';
TagsCnt[flag].className = 'undis_wuming_ren';
flag = v;
Tags[v].className = 'top_wuming_1';
TagsCnt[v].className = 'dis_wuming_ren';
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</SCRIPT>
</DIV>
</DIV>
</body>
</html>本文来自武鸣人网站，转载请注明出处