脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS+CSS带小三角指引的滑动门

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

 更新时间：2015年09月22日 15:28:53   作者：企鹅  
这篇文章主要介绍了JS+CSS实现带小三角指引的滑动门效果,可实现带有箭头提示效果的滑动门功能,涉及JavaScript动态操作页面元素样式的相关技巧,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-sj-move-menu-style-codes/

具体代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 基于JS实现PHP的sprintf函数实例

    基于JS实现PHP的sprintf函数实例

    这篇文章主要介绍了基于JS实现PHP的sprintf函数的方法,可实现JavaScript模拟PHPsprintf函数的输出功能,涉及JavaScript字符串操作的相关技巧,需要的朋友可以参考下
    2015-11-11
  • js使用循环清空某个div中的input标签值

    js使用循环清空某个div中的input标签值

    清空div中input标签值的方法有很多，下面为大家介绍下使用循环清空某个div中的input标签值的具体实现
    2014-09-09
  • 纯js仿淘宝京东商品放大镜功能

    纯js仿淘宝京东商品放大镜功能

    本文主要介绍了纯js仿淘宝京东商品放大镜功能的实例。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • 实例讲解避免javascript冲突的方法

    实例讲解避免javascript冲突的方法

    这篇文章主要以实例的方式讲解了避免javascript冲突的方法，具有一定的参考价值，感兴趣的朋友可以参考一下
    2016-01-01
  • 原生JS实现左右箭头选择日期实例代码

    原生JS实现左右箭头选择日期实例代码

    原生JS 左右箭头选择日期,就是用左右尖括号可改变中间日期的值，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下
    2017-03-03
  • 推荐一个封装好的getElementsByClassName方法

    推荐一个封装好的getElementsByClassName方法

    这篇文章主要推荐一个封装好的getElementsByClassName方法,需要的朋友可以参考下
    2014-12-12
  • js onclick事件传参讲解

    js onclick事件传参讲解

    本文是对js中的onclick事件传参进行了详细的讲解，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript拖拽&拖放系列文章3之细说事件对象

    Javascript中的事件对象其实和.NET中继承自EventArgs类的派生类类似，用来给事件处理程序传递状态信息，从而进行相应的操作。这一篇文章将讲述Javascript事件对象中和实现拖拽功能相关的几个属性，并在最后将IE事件模型和标准DOM事件模型的差异封装到一个类中，从而适应所有的浏览器。
    2008-09-09
  • JavaScript this 深入理解

    JavaScript this 深入理解

    一直以来，对于JavaScript 中的this的理解都是很模糊的， 特别是对函数进行apply 与 call 调用。这两个操作如果没有很好的理解 JavaScript中this的概念，会越搞越迷糊。
    2009-07-07
  • js实现类选择器和name属性选择器的示例步骤

    js实现类选择器和name属性选择器的示例步骤

    这篇文章主要介绍了js实现类选择器和name属性选择器的示例步骤，帮助大家更好的理解和使用js，感兴趣的朋友可以了解下
    2021-02-02

最新评论