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 相关文章推荐
JQUERY复选框CHECKBOX全选,取消全选
Aug 30 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
原生JavaScript生成GUID的实现示例
Sep 05 Javascript
值得分享的Bootstrap Ace模板实现菜单和Tab页效果
Dec 30 Javascript
JavaScript简单实现弹出拖拽窗口(一)
Jun 17 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
May 21 Javascript
在vue项目中使用Nprogress.js进度条的方法
Jan 31 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 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/06/26 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
JSON.stringify 语法实例讲解
2012/03/14 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
angular.js实现列表orderby排序的方法
2018/10/02 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python实现的异步代理爬虫及代理池
2017/03/17 Python
python设置环境变量的作用和实例
2019/07/09 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
django实现将后台model对象转换成json对象并传递给前端jquery
2020/03/16 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
python Socket网络编程实现C/S模式和P2P
2020/06/22 Python
python 常见的反爬虫策略
2020/09/27 Python
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
党支部书记先进事迹
2014/01/17 职场文书
科技节口号
2014/06/19 职场文书
党员创先争优心得体会
2014/09/11 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话全文
2014/10/25 职场文书
2014年评职称工作总结
2014/11/20 职场文书
读书笔记怎么写
2015/07/01 职场文书