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

前端技术 2023/09/05 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.net/js/2015/js-css-f-yahoo-hdm-menu-demo/

具体代码如下：

<!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>·欢迎来到phpstudy</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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/12931

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案