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

更新时间：2015年10月13日 10:13:30 作者：企鹅

这篇文章主要介绍了JS+CSS实现仿雅虎另类滑动门切换效果,涉及JavaScript响应鼠标事件及针对页面元素的嵌套循环遍历技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.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>·欢迎来到脚本之家</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程序设计有所帮助。

您可能感兴趣的文章:

将Datatable转化成json发送前台实现思路
将Datatable转化成json可以将dt序列化成json，放到前台的隐藏控件hidBoundary中，具体的实现如下，有类似需求的朋有可以参考下
2013-09-09
JS 获取页面尺寸的方法详解
通过 JS 获取页面相关的尺寸是比较常见的操作,尤其是在动态计算页面布局时,今天我们就来学习一下几个获取页面尺寸的基本方法,需要的朋友可以参考下
2023-09-09
编程语言JavaScript简介
这篇文章主要介绍了编程语言JavaScript简介,本文讲解了JavaScript是什么、JavaScript特点、JavaScript和Java的区别等内容,需要的朋友可以参考下
2014-10-10
js获取ajax返回值代码
这篇文章主要介绍了js如何获取ajax的返回值,需要的朋友可以参考下
2014-04-04
javascript手工制作悬浮菜单
这篇文章主要介绍了javascript手工制作悬浮菜单，主要也是想自己练练手，感觉还不错，这里推荐给大家。
2015-02-02
js获取指定日期前后的日期代码
js获取指定日期前后的日期，在实际应用中还是比较实用的，下面为大家简单介绍下具体的实现过程，有需要的朋友可以参考下
2013-08-08
js判断数组中是否包含某个值的4种方法总结
这篇文章主要给大家总结介绍了关于js判断数组中是否包含某个值的4种方法,数组是我们编程中经常使用的的数据结构之一,在处理数组时我们经常需要在数组中查找特定的值,JavaScript 包含一些内置方法来检查数组是否有特定的值或对象,需要的朋友可以参考下
2023-11-11
js中的闭包学习心得
这篇文章主要介绍了js中的闭包学习心得以及重要点的代码写法，对此有兴趣的朋友跟着小编一起学习下吧。
2018-02-02
underscore之Collections_动力节点Java学院整理
underscore为集合类对象提供了一致的接口。集合类是指Array和Object，暂不支持Map和Set。下面通过本文给大家分享underscore之Collections的相关知识，需要的的朋友参考下吧
2017-07-07
JavaScript调用浏览器打印功能实例分析
这篇文章主要介绍了JavaScript调用浏览器打印功能的方法,实例分析了针对各种常用浏览器调用打印功能的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-07-07

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具