完美网页选项卡js特效代码

6个月前 (05-17 15:52)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

这个选项卡视觉效果很不错，当用户的鼠标经过时立即切换显示，漂亮实用选项卡特效代码，网站常用经典网页特效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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特效代码_武鸣人</title>
<style type="text/css">
<!--
/* 初始化 */
body {
font: 12px/1 "宋体", SimSun, serif;
background:#fff;
color:#000;
}
ul,
li,
dl,
dt,
dd {
margin:0;
padding:0;  /* 清除浏览器默认的margin和padding值 */
}
ul,
li {
list-style:none outside;  /* 清除浏览器中列表项默认的占位 */
}
a {
text-decoration:none;
}
img {
border:0;
}
/* 选项卡整体外观定义 */
.wuming_ren {
width:400px;
height:160px;
overflow:hidden;
}
.wuming_ren .tabBox {
height:100%;
position:relative;
background:#09c;
}
.wuming_ren .tabBox li {
float:left;
width:25%;
text-align:center;
}
.wuming_ren h4 {
margin:0;
height:26px;
font-size:1em;
line-height:22px;
}
.wuming_ren h4 a {
color:#039;
font-weight:normal;
display:block;
background:#bfeafd url(/img/20240517_www_wuming_ren_22.png) no-repeat;
padding-left:5px;
}
.wuming_ren h4 a span {
display:block;
background:url(/img/20240517_www_wuming_ren_22.png) no-repeat top right;
padding-right:5px;
}
.wuming_ren h4 a:hover,
.wuming_ren .tabOn h4 a{
background-position:0 -50px;
}
.wuming_ren h4 a:hover span,
.wuming_ren .tabOn h4 a span {
background-position:right -50px;
}
.wuming_ren .tabContentBox li{
width:auto;
margin-top:0;
}
.wuming_ren .tabContentBox {
width:390px;
height:130px;
border:1px solid #069;
text-align:left;
overflow:hidden;
background:#fff;
position:absolute;
top:22px;
left:0;
display:none;
margin:4px;
}
.wuming_ren li:hover .tabContentBox,
.wuming_ren .tabOn .tabContentBox {
display:block;
}
/* 以下是对各项内容的CSS定义 */
.wuming_ren .tabContentBox .blog,
.wuming_ren .tabContentBox .group {
color:#999;
line-height:2em;
margin:5px;
}
.wuming_ren .tabContentBox .blog dt,
.wuming_ren .tabContentBox .group dt,
.wuming_ren .tabContentBox .blog dd,
.wuming_ren .tabContentBox .group dd{
float:left;
border-bottom: 1px dotted #9cf;
}
.wuming_ren .tabContentBox .blog dt,
.wuming_ren .tabContentBox .group dt {
width:60%;
white-space:nowrap;
overflow:hidden;
clear:left;
font-size:1.1em;
}
.wuming_ren .tabContentBox .blog dt a,
.wuming_ren .tabContentBox .group dt a {
color:#039;
display:block;
margin-left:5px;
padding-left:12px;
background: url(/img/20240517_www_wuming_ren_23.png) no-repeat 5px 11px;
}
.wuming_ren .tabContentBox .blog dt a:hover,
.wuming_ren .tabContentBox .group dt a:hover {
color:#f90;
background-position:5px -19px;
}
.wuming_ren .tabContentBox .blog dd,
.wuming_ren .tabContentBox .group dd {
color:#0cf;
width:20%;
float:left;
white-space:nowrap;
overflow:hidden;
}
.wuming_ren .tabContentBox .blog dd a,
.wuming_ren .tabContentBox .group dd a {
color:#069;
}
.wuming_ren .tabContentBox .blog dd a:hover,
.wuming_ren .tabContentBox .group dd a:hover {
color:#f90;
}
.wuming_ren .tabContentBox .album li,
.wuming_ren .tabContentBox .share li{
width:24.9%;
float:left;
padding-top:15px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript">
<!--
window.onload = tabEffect;
function tabEffect()
{//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var allElements = document.getElementsByTagName('*');
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf('tabOption') >= 0)
{
allElements[i].onmouseover = mouseOver;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
}
function mouseOver()
{
wuming_ren = this.parentNode;
tabOptions = wuming_ren.getElementsByTagName("li");
for (var i=0; i<tabOptions.length; i++)
{
if (tabOptions[i].className.indexOf('tabOption') >= 0)
{
tabOptions[i].className = "tabOption";
}
}
this.className += " tabOn";
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
-->
</script>
</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 class="wuming_ren" id="wuming_ren1">
<ul class="tabBox">
<li class="tabOption tabOn"><h4><a href="https://wuming.ren" title="单击，跳转到所有[日志]列表"><span>日志</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent blog">
<dt><a href="https://wuming.ren" title="手工杀毒的一些心得！">手工杀毒的一些心得！</a></dt>
<dd class="name"><a href="https://wuming.ren/" title="">QUESTER</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
<dd class="name"><a href="https://wuming.ren/" title="作者：snl">snl</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
<dd class="name"><a href="https://wuming.ren/" title="作者：豆猫">豆猫</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="Photoshop制作一张旧的黑桃A扑克牌">Photoshop制作一张旧的黑桃A扑克牌</a></dt>
<dd class="name"><a href="https://wuming.ren/" title="作者：greengnn">greengnn</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt>
<dd class="name"><a href="https://wuming.ren/" title="作者：amethyst01">amethyst01</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
<li class="tabOption"><h4><a href="https://wuming.ren" title="单击，跳转到所有[相册]列表"><span>相册</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent album">
<li><a href="https://wuming.ren" title="查看相册内容"><img src="/img/20240517_www_wuming_ren_24.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看相册内容"><img src="/img/20240517_www_wuming_ren_24.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看相册内容"><img src="/img/20240517_www_wuming_ren_24.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看相册内容"><img src="/img/20240517_www_wuming_ren_24.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>      </ul>
</div>
</li>
<li class="tabOption"><h4><a href="https://wuming.ren" title="单击，跳转到所有[分享]列表"><span>分享</span></a></h4>
<div class="tabContentBox">
<ul class="tabContent share">
<li><a href="https://wuming.ren" title="查看内容"><img src="/img/20240517_www_wuming_ren_25.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看内容"><img src="/img/20240517_www_wuming_ren_25.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看内容"><img src="/img/20240517_www_wuming_ren_25.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
<li><a href="https://wuming.ren" title="查看内容"><img src="/img/20240517_www_wuming_ren_25.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>
</ul>
</div>
</li>
<li class="tabOption"><h4><a href="https://wuming.ren" title="单击，跳转到所有[群组]列表"><span>群组</span></a></h4>
<div class="tabContentBox">
<dl class="tabContent group">
<dt><a href="https://wuming.ren" title="标题：优秀广告设计，不服不行！">优秀广告设计，不服不行！</a></dt>
<dd class="name"><a href="https://wuming.ren" title="群组：设计视觉">设计视觉</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
<dd class="name"><a href="https://wuming.ren" title="群组：手绘爱好者">手绘爱好者</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt>
<dd class="name"><a href="https://wuming.ren" title="群组：WEB标准化">WEB标准化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
<dd class="name"><a href="https://wuming.ren" title="群组：WEB标准化">WEB标准化</a></dd>
<dd>2009-01-10</dd>
<dt><a href="https://wuming.ren" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt>
<dd class="name"><a href="https://wuming.ren" title="群组：设计视觉">设计视觉</a></dd>
<dd>2009-01-10</dd>
</dl>
</div>
</li>
</ul>
</div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/999.html

选项卡切换
回帖

完美网页选项卡js特效代码 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息