JS+DIV+CSS实现的经典标签切换效果代码


Posted in Javascript onSeptember 14, 2015

本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码。分享给大家供大家参考。具体如下:

这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助。

运行效果截图如下:

JS+DIV+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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS布局实例:CSS标签切换代码</title>
<style type="text/css"> 
* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}
a {behavior:url(xuxian.htc)}
.woaicss {width:438px; height:300px; overflow:hidden; margin:50px auto;}
.woaicss_title {width:438px; height:30px; background:#fff url(images/btn_bg.png) no-repeat; overflow:hidden;}
.woaicss_title li {display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center;}
.woaicss_title li a {display:block; width:90px; heigth:30px; line-height:34px; color:#fff;}
.woaicss_title li a:hover {color:#f0f0f0; text-decoration:underline;}
.woaicss_title_bg1 {background-position:0 0;}
.woaicss_title_bg2 {background-position:0 -30px;}
.woaicss_title_bg3 {background-position:0 -60px;}
.woaicss_title_bg4 {background-position:0 -90px;}
.woaicss_con {display:block; width:438px; height:270px; background:url(images/con_bg.png) no-repeat 0 0; overflow:hidden;}
.woaicss_con ul {width:418px; height:250px; margin:12px auto;}
.woaicss_con li {width:418px; line-height:30px; margin:0 auto; white-space:nowrap; text-overflow:ellipsis; overflow: hidden;}
.woaicss_con li a {color:#03c;}
.woaicss_con li a:hover {color:#069; text-decoration:underline;}
.woaicss_copy {width:438px; margin:10px auto; text-align:center;}
.woaicss_copy a {color:#f00;}
</style>
</head>
<body>
<div class="woaicss">
<script language="javascript"> 
 function woaicssq(num){
 for(var id = 1;id<=4;id++)
 {
 var MrJin="woaicss_con"+id;
 if(id==num)
 document.getElementById(MrJin).style.display="block";
 else
 document.getElementById(MrJin).style.display="none";
 }
 if(num==1) 
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg1";
 if(num==2)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg2";
 if(num==3)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg3";
 if(num==4)
 document.getElementById("woaicsstitle").className="woaicss_title woaicss_title_bg4";
 }
</script>
 <ul class="woaicss_title woaicss_title_bg1" id="woaicsstitle">
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(1)">ExtJS</a></li>
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(2)">Div教程</a></li>
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(3)">CSS布局实例</a></li>
  <li><a href="#" target="_blank" onmouseover="javascript:woaicssq(4)">WEB标准化</a></li>
 </ul>
 <div class="woaicss_con" id="woaicss_con1" style="display:block;">
   <ul>
    <li>·<a href="#" title="">Web Developer插件教程 CSS网页布局辅助设计利器!详细图文讲解!</a></li>
    <li>·<a href="#" title="">CSS Templates 频道4月5日更新 增加模板22套</a></li>
    <li>·<a href="#" title="">XHTML与CSS入门经典 从零开始系列教程!</a></li>
    <li>·<a href="#" title="">DIV+CSS布局入门示例(目录)</a></li>
    <li>·<a href="#" title="">CSS基础教程17篇 [翻译Htmldog]</a></li>
    <li>·<a href="#" title="">DIV CSS布局实例:用css网站布局之十步实录!(目录) </a></li>
    <li>·<a href="#" title="">WEB2.0标准教程 循序渐进十二天的基础学习!</a></li>
    <li>·<a href="#" title="">Div+CSS 网页布局 教程!</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con2" style="display:none;">
   <ul>
    <li>·<a href="#" title="">DIV+CSS的XHTML代码结构浅谈 - 不要真DIV+CSS了</a></li>
    <li>·<a href="#" title="">Div CSS教程:letter-spacing与word-spacing属性详解</a></li>
    <li>·<a href="#" title="">margin外边距属性在inline内联元素中应用的测试!</a></li>
    <li>·<a href="#" title="">Div CSS教程:block element与inline element元素详解 </a></li>
    <li>·<a href="#" title="">DIV CSS实例教程:一款清新风格的CSS新闻列表制作</a></li>
    <li>·<a href="#" title="">DIV CSS布局中如何组织样式表以便于简化、维护</a></li>
    <li>·<a href="#" title="">DIV CSS编码中容易犯的一些错误 DIV CSS编码中容易犯的一些错误</a></li>
    <li>·<a href="#" title="">如何将XHTML+CSS页面转换为打印机页面</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con3" style="display:none;">
   <ul>
    <li>·<a href="#" title="">IE6、IE7绝对定位与链接 问题研究</a></li>
    <li>·<a href="#" title="">CSS实例:无懈可击的CSS圆角技术!</a></li>
    <li>·<a href="#" title="">CSS布局教程:DIV+CSS三列式布局的实现方法</a></li>
    <li>·<a href="#" title="">CSS基础实例:CSS实现带背景图片的文字链接的方法</a></li>
    <li>·<a href="#" title="">Div+CSS实例:如何用CSS实现背景半透明效果</a></li>
    <li>·<a href="#" title="">CSS实例:list-style-type在IE与FF中奇怪的现象解析</a></li>
    <li>·<a href="#" title="">Div CSS布局关于分辨率与100%自适应问题的探讨!</a></li>
    <li>·<a href="#" title="">CSS实例:如何让无空格的长字符在IE和FF下面实现自动换行?</a></li>
   </ul>
 </div>
 <div class="woaicss_con" id="woaicss_con4" style="display:none;">
   <ul>
    <li>·<a href="#" title="">CSS实用案例集(第2版) - CSS Cookbook</a></li>
    <li>·<a href="#" title="">CSS禅意花园 读后感</a></li>
    <li>·<a href="#" title="">CSS实战手册 公开发行 强烈推荐!2007年第17届Jolt 生产效率大奖</a></li>
    <li>·<a href="#" title="">CSSer:你该如何发展,如何学习进步?</a></li>
    <li>·<a href="#" title="">The ultimate webdesign usability checklist</a></li>
    <li>·<a href="#" title="">Adobe Dreamweaver CS3 新功能简介</a></li>
    <li>·<a href="#" title="">Web Standards与Web2.0应有所区别!</a></li>
    <li>·<a href="#" title="">CSS教程:是什么使得CSS改善了WEB网站的可访问性</a></li>
   </ul>
 </div>
</div>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
js读写json文件实例代码
Oct 21 Javascript
如何使用HTML5地理位置定位功能
Apr 27 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
Sep 14 #Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 #Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 #Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 #Javascript
JS实现可关闭的对联广告效果代码
Sep 14 #Javascript
详解JavaScript中的4种类型识别方法
Sep 14 #Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 #Javascript
You might like
PHP利用超级全局变量$_POST来接收表单数据的实例
2016/11/05 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
bootstrap 路径导航 分页 进度条的实例代码
2018/08/06 Javascript
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
浅谈VUE-CLI脚手架热更新太慢的原因和解决方法
2018/09/28 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
Python中input和raw_input的一点区别
2014/10/21 Python
Python实现的彩票机选器实例
2015/06/17 Python
python安装Scrapy图文教程
2017/08/14 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Python定时任务工具之APScheduler使用方式
2019/07/24 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python如何输出反斜杠
2020/06/18 Python
python如何停止递归
2020/09/09 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
校园演讲稿汇总
2014/05/21 职场文书
个人求职信范文
2014/05/24 职场文书
村班子对照检查材料
2014/08/18 职场文书
党的群众路线教育实践活动个人对照检查材料(企业)
2014/11/05 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
python高温预警数据获取实例
2022/07/23 Python