JS+CSS实现带小三角指引的滑动门效果


Posted in Javascript onSeptember 22, 2015

本文实例讲述了JS+CSS实现带小三角指引的滑动门效果。分享给大家供大家参考。具体如下:

这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡,有时候因显示器的原因看不太清,其实这个颜色是自己可以控制的,改一下就行了,带三角指引后,使整个滑动门的结构更清淅,导向性更合理。

运行效果截图如下:

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滑动门</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{
 padding:30px;
}
.tabsBox{ width:400px; margin:20px auto;}
.tabs{ height:20px;}
.tabs li{ width:80px; text-align:center; padding-top:2px; line-height:18px; float:left; background-color:#ccc; margin-right:5px; list-style:none; position:relative; cursor:pointer; color:#333;}
.tabs li span{ display:none;}
.tabs .cur{ background-color:#f0f0f0;}
.tabs .cur span{ display:block; width:1px; height:1px; border:solid 8px; border-color:#f0f0f0 #fff #fff #fff; position:absolute; top:20px; left:32px; overflow:hidden; z-index:-1;}
.cons{ height:120px; padding:8px 12px; overflow:hidden; border:1px solid #f0f0f0; position:relative; z-index:1;}
.cons ul li{ list-style:none; line-height:20px;}
.hidden{ display:none;}
.block{ display:block;}
</style>
</head>
<body>
<div class="tabsBox">
 <ul id="Tabs" class="tabs">
  <li class="cur">最新更新<span></span></li>
  <li>推荐下载<span></span></li>
  <li>下载排行<span></span></li>
  <li>本月排行<span></span></li>
 </ul>
 <div id="TabsCon" class="cons">
  <ul>
  <li><a href="#" target="_blank">基于JavaScript的气泡提示网页版</a></li><li><a href="#" target="_blank">C#调用OFFICE组件生成Excel表格示例</a></li><li><a href="#" target="_blank">iFrame 框架在多页面间相互传值的实例</a></li><li><a href="#" target="_blank">高亮显示代码的在线编辑器ASP.NET版</a></li><li><a href="#" target="_blank">《Java2核心技术卷2:高级特性》第7版中文高清 PDF</a></li><li><a href="#" target="_blank">VB餐厅POS收银软件</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">VB餐厅POS收银软件</a></li><li><a href="#" target="_blank">VB 6.0 简体中文标准版</a></li><li><a href="#" target="_blank">Delphi加密隐藏或还原Windows盘符驱动器</a></li><li><a href="#" target="_blank">ImageVue 2.0 PHP+FLASH+XML高级相册</a></li><li><a href="#" target="_blank">VB商品零售进销存程序含MSSQL数据库文件</a></li>
 </ul>
 <ul>
 <li><a href="#" target="_blank">jQuery 模块拖动,拖动层效果,可淡入淡出</a></li><li><a href="#" target="_blank">jQuery单行新闻滚动</a></li><li><a href="#" target="_blank">经典的jQuery多行文本滚动</a></li><li><a href="#" target="_blank">JS图片切换学习版,没有过多修饰</a></li><li><a href="#" target="_blank">漂浮广告代码,Js演示</a></li><li><a href="#" target="_blank">边滚边停的JS图片滚动</a></li></ul>
 <ul>
 <li><a href="#" target="_blank">递归读取数据库创建树控菜单的Delphi例子</a></li><li><a href="#" target="_blank">VB抓取DLL或EXE应用程序内的图标资源</a></li><li><a href="#" target="_blank">jQuery StartStopSlider 滚动切换插件</a></li><li><a href="#" target="_blank">jQuery EasyUI 实例演示(菜单、TAB等)</a></li><li><a href="#" target="_blank">VB+SQL2000考试卷(题库)生成与管理系统</a></li>
 </ul>
 </div>
</div>
<script type="text/javascript">
 var lis = document.getElementById("Tabs").getElementsByTagName("li");
 var uls = document.getElementById("TabsCon").getElementsByTagName("ul");
 var order = 0;
 for(var i=0; i<lis.length; i++){
  lis[i].value = i;
  lis[i].onmouseover = function(){
   ChangeTabs(this.value); 
  };
  uls[i].className = "hidden";
 }
 lis[order].className = "cur";
 uls[order].className = "block";
 function ChangeTabs(nowTab){
  lis[order].className = "";
  uls[order].className = "hidden";
  order = nowTab
  lis[nowTab].className = "cur";
  uls[nowTab].className = "block";
 }
</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
解析Vue.js中的组件
Feb 02 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
微信小程序反编译的实现
Dec 10 Javascript
原生JavaScript实现随机点名表
Jan 14 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 #Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 #Javascript
jQuery实现的经典滑动门效果
Sep 22 #Javascript
jquery实现的简单二级菜单效果代码
Sep 22 #Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 #Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 #Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 #Javascript
You might like
PHP小教程之实现双向链表
2014/06/12 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP注释语法规范与命名规范详解篇
2018/01/21 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
使用JavaScript进行表单校验功能
2017/08/01 Javascript
angularJs select绑定的model取不到值的解决方法
2018/10/08 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[41:05]Serenity vs Pain 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python制作简单的网页爬虫
2015/11/22 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python调用接口的4种方式代码实例
2019/11/19 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
canvas学习总结三之绘制路径-线段
2019/01/31 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
求职自荐信怎么写
2014/03/06 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
贷款担保书范文
2014/05/13 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
个人总结与自我评价
2015/02/14 职场文书