爱吾下载 ● 文章资讯

分类分类

JS+CSS实现仿雅虎另类滑动门切换效果

更新时间：2026-03-29 01:03:38作者：yezheng

本文实例讲述了JS+CSS实现仿雅虎另类滑动门切换效果。分享给大家供大家参考。具体如下：

这是仿照雅虎特色服务的一个Tab滑动切换效果，核心是一个CSS滑动门，经过了改进，有点特别，看下效果吧，估计很多朋友会喜欢的。

具体代码如下：

<!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>

<title>仿雅虎另类CSS滑动门切换</title>

<style type="text/css">

<!--

* { margin:0; padding:0 }

div, dl, dt, dd { display:inline-block; }

div, dl, dt, dd { display:block }

h2{ font: 800 12px/20px "宋体"; }

#tabs { border:1px solid #ccc; margin:40px; width:382px; padding:4px 0 }

#tabs div { padding:69px 4px 0px; position:relative; }

#tabs dt { text-align:center; font: 12px/60px "宋体"; }

#tabs dd { font: 12px/20px "宋体"; padding:10px; }

#tab1 dt { left: 4px; top: 4px }

#tab2 dt { left:130px; top:4px }

#tab3 dt { left:256px; top:4px }

#tab4 dt { left: 4px; top: 4px }

#tab5 dt { left:130px; top:4px }

#tab6 dt { left:256px; top:4px }

.close dt { height:60px; width:120px; background:#FAFAFA; position:absolute; border:1px solid #ccc }

.close dd { display:none }

.open dt { height:65px; width:120px; background:#EBEBEB; position:absolute; border:1px solid #ccc; border-bottom:none; }

.open dd { background:#EBEBEB; border:1px solid #ccc; }

-->

</style>

<script type="text/javascript">

window.onload =

function(){

alltabs = document.getElementById('tabs').getElementsByTagName('dl')

for(i = 0; i < alltabs.length; i++){

alltabs[i].className = "close"

alltabs[i].onmouseover = function(){

for(j = 0; j < alltabs.length; j++){

alltabs[j].className = "close"

}

this.className = "open"

}

}

}

</script>

</head>

<body>

<div id="tabs">

<h2>·欢迎来到爱吾源码</h2>

<div>

<dl id="tab1">

<dt>今日更新</dt>

<dd>1、今日更新的内容</dd>

</dl>

<dl id="tab2">

<dt>今日排行</dt>

<dd>2、今日排行的内容</dd>

</dl>

<dl id="tab3">

<dt>今日推荐</dt>

<dd>3、今日推荐的内容</dd>

</dl>

</div>

<div>

<dl id="tab4">

<dt>最近下载</dt>

<dd>4、最近下载的东西</dd>

</dl>

<dl id="tab5">

<dt>脚本代码</dt>

<dd>5、脚本代码的内容</dd>

</dl>

<dl id="tab6">

<dt>网页特效</dt>

<dd>6、精品网页特效的内容</dd>

</dl>

</div>

</div>

</body>

</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

展开全部

相关

手游推荐
说两句网友评论
    我要跟贴
    取消