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 相关文章推荐
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
详解vee-validate的使用个人小结
Jun 07 Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
vue中实现上传文件给后台实例详解
Aug 22 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
vue中echarts引入中国地图的案例
Jul 28 Javascript
js实现石头剪刀布游戏
Oct 11 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
一个SQL管理员的web接口
2006/10/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
thinkphp5实现无限级分类
2019/02/18 PHP
JavaScript Cookie显示用户上次访问的时间和次数
2009/12/08 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
几种经典排序算法的JS实现方法
2016/03/25 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python抓取手机号归属地信息示例代码
2016/11/28 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python字符串常用方法
2018/06/14 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
python语言元素知识点详解
2019/05/15 Python
Python 实现Image和Ndarray互相转换
2020/02/19 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
全球立体声:World Wide Stereo
2018/09/29 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
大学生毕业自我鉴定范文
2013/09/19 职场文书
环境科学专业个人求职信
2013/09/26 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
中秋客户感谢信
2015/01/22 职场文书
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server