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

2019-11-20 11:28:24

字体：大中小

来源：转载

供稿：网友

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/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>・欢迎来到武林网</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程序设计有所帮助。

上一篇：JS实现自动定时切换的简洁网页选项卡效果

下一篇：JS实现的简洁二级导航菜单雏形效果