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 相关文章推荐
JS获取地址栏参数的小例子
Aug 23 Javascript
Javascript 绘制 sin 曲线过程附图
Aug 21 Javascript
node.js中的buffer.toJSON方法使用说明
Dec 14 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
jquery预加载图片的方法
May 27 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
通过npm引用的vue组件使用详解
Mar 02 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
webpack中的模式(mode)使用详解
Feb 20 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/11/18 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
PHP实现添加购物车功能
2017/03/06 PHP
jQuery boxy弹出层插件中文演示及使用讲解
2011/02/24 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
Bootstrap表单组件教程详解
2016/04/26 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
JavaScript实现图片懒加载的方法分析
2018/07/05 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
[35:27]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第二场 10.29
2020/10/29 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python实现批量修改文件名实例
2015/07/08 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
浅析python实现scrapy定时执行爬虫
2018/03/04 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python里运用私有属性和方法总结
2019/07/08 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
挂职学习心得体会
2014/09/09 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
浅谈Java父子类加载顺序
2021/08/04 Java/Android
Prometheus 监控MySQL使用grafana展示
2021/08/30 MySQL