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


Posted in Javascript onOctober 13, 2015

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

这是仿照雅虎特色服务的一个Tab滑动切换效果,核心是一个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/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程序设计有所帮助。

Javascript 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
flexigrid 参数说明
Nov 23 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
Jun 23 Javascript
浅谈js的异步执行
Oct 18 Javascript
原生JS查找元素的方法(推荐)
Nov 22 Javascript
JS html时钟制作代码分享
Mar 03 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
实例详解BootStrap的动态模态框及静态模态框
Aug 13 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
javascript利用键盘控制小方块的移动
Apr 20 Javascript
实例讲解React 组件
Jul 07 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 #Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 #Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 #Javascript
编写高性能Javascript代码的N条建议
Oct 12 #Javascript
JavaScript 性能优化小结
Oct 12 #Javascript
一个php+js实时显示时间问题
Oct 12 #Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
Oct 12 #Javascript
You might like
显示程序执行时间php函数代码
2013/08/29 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
Zend Framework分发器用法示例
2016/12/11 PHP
页面中iframe相互传值传参
2009/12/13 Javascript
一段实现页面上的图片延时加载的js代码
2010/02/11 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
详解Next.js页面渲染的优化方案
2019/01/27 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
vue.js封装switch开关组件的操作
2020/10/26 Javascript
介绍Python中的一些高级编程技巧
2015/04/02 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python 处理telnet返回的More,以及get想要的那个参数方法
2019/02/14 Python
python实现Virginia无密钥解密
2019/03/20 Python
python画图——实现在图上标注上具体数值的方法
2019/07/08 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
大学生水文观测实习自我鉴定
2013/09/29 职场文书
初中政治教学反思
2014/01/17 职场文书
安全标准化实施方案
2014/02/20 职场文书
实践单位评语
2014/04/26 职场文书
2014年林业工作总结
2014/12/05 职场文书
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android
JS创建或填充任意长度数组的小技巧汇总
2021/10/24 Javascript