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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery+CSS实现滑动的标签分栏切换效果

    jQuery+CSS实现滑动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 运行代码如下 具体代码如下 <html> <head> <title>jQuery平滑滚动的标签分栏切换</title> <meta charset="gb2312"> <style> ul,li{ margin:0px; padding:0px; list-style:none } li{ float:left; back

  • JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效

    JQuery实现简单的图片滑动切换特效 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>t图片的滑动</title> <meta charset="utf-8" /> <style type="text/css" > *{ margin:0

  • 移动手机APP手指滑动切换图片特效附源码下载

    移动手机APP手指滑动切换图片特效附源码下载

    这是一款效果非常炫酷的移动手机APP滑动手指切换图片特效.该APP特效在移动手机中用户可以通过手指的左右滑动来切换图片,在桌面设备中通过鼠标也可达到同样的效果. 效果演示          源码下载 使用方法 HTML结构 这个移动手机APP切换图片特效的HTML结构采用嵌套<div>的HTML结构,每一张图片卡片都包裹在div.demo__card中,里面放置了图片,描述信息和一些额外的图层. <div class="demo__card"> <div

  • jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）

    jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）

    今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示    源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.

  • jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结

    本文实例讲述了jQuery实现的Tab滑动选项卡及图片切换效果.分享给大家供大家参考.具体如下: 这里汇总了几个Tab,滑动门,选项卡,图片切换,在一个网页中实现了超多的常用效果,大家喜欢的滑动门,焦点图切换,标签选项卡以及文字轮番等都集中在了一起,无聊的功劳,忙的时候还顾不上写,另外还加入了圆角,都是参考以前学习的知识写的.期间使用了jquery-1.6.2.min.js框架库. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-n

  • JS+CSS实现自动切换的网页滑动门菜单效果代码

    JS+CSS实现自动切换的网页滑动门菜单效果代码

    本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code

  • 基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载（一）

    内容滑动切换应用非常广,常见的有幻灯片焦点图.画廊切换等.随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程. 先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示: 效果展示      源码下载 本次教程分三个部分: 1.使用jQuery开发基本的内容滑动切换效果, 2.支持移动端触控自适应的内容滑动切换效果, 3.封装内容滑动切换效果jQuery插件. 本文讲解第一部分,

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

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

    本文实例讲述了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 Transi

  • JS+CSS实现简易实用的滑动门菜单效果

    JS+CSS实现简易实用的滑动门菜单效果

    本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/ 具体代码如下: <html> <head> <t

  • JS实现具备延时功能的滑动门菜单效果

    JS实现具备延时功能的滑动门菜单效果

    本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

  • JS+CSS实现淡入式焦点图片幻灯切换效果的方法

    本文实例讲述了JS+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

  • jQuery实现类似滑动门切换效果的层切换

    复制代码 代码如下: <!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=&qu

  • JS实现漂亮的淡蓝色滑动门效果代码

    JS实现漂亮的淡蓝色滑动门效果代码

    本文实例讲述了JS实现漂亮的淡蓝色滑动门效果.分享给大家供大家参考.具体如下: 这款漂亮淡蓝色滑动门代码,感觉很不错哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-hdm-menu-demo-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml

  • js实现的早期滑动门菜单效果代码

    js实现的早期滑动门菜单效果代码

    本文实例讲述了js实现的早期滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是传说中的早期滑动门菜单Demo代码,测试时请把鼠标放到左侧相应的导航栏目上,放在左侧菜单上的时候,你就发现玄机了,右侧的内容会跟着变化,JS与HTML结合实现的,比较传统的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/ 具体代码如下: <HTML> <HEAD> <TI

  • JS+CSS实现大气清新的滑动菜单效果代码

    JS+CSS实现大气清新的滑动菜单效果代码

    本文实例讲述了JS+CSS实现大气清新的滑动菜单效果代码.分享给大家供大家参考,具体如下: 这是一款比较大气清新的滑动导航菜单,CSS和JavaScript配合完成,鼠标放到一级菜单上,会滑出二级的菜单,兼容性也不错,适合大多数网站使用,用到两张背景图片,请拷贝图片地址下载图片. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-dqqx-scroll-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS+CSS实现仿支付宝菜单选中效果代码

    JS+CSS实现仿支付宝菜单选中效果代码

    本文实例讲述了JS+CSS实现仿支付宝菜单选中效果代码.分享给大家供大家参考.具体如下: 这是一个漂亮的JS+CSS仿支付宝菜单,总体风格和形式与支付宝的菜单没什么两样,细心会发现这是一个CSS爱好者自己手功完成的,自己美化图片,重写CSS代码,为作者给我们奉献这么好的菜单而表示感谢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-f-alipay-style-menu-codes/ 具体代码如下: <!DOCTYPE html

随机推荐