JS实现具备延时功能的滑动门菜单效果
本文实例讲述了JS实现具备延时功能的滑动门菜单效果。分享给大家供大家参考。具体如下：
这是一款鼠标感应时间延迟的滑动门菜单，其实也就是一滑动门，只不过鼠标在移上后不是立即反应，而是稍微迟缓了一下，这样用也是有好处的，这个时间根据你的喜好是可以调整的，本滑动门你可轻易修改外观，把它变成一个内容扩展的菜单。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-delay-style-show-menu-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>
<title>鼠标感应延迟的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.CMS{font-size:12px;width:200px;line-height:30px;}
.CMS ul,li{list-style:none;margin:0px;padding:0px;}
.CMS .TabTop{clear:both;height:30px;}
.CMS .TabTop ul{color:#FFF;height:30px;}
.CMS .TabTop li{display:inline;width:50px;height:30px;float:left;text-align:center;cursor:pointer;}
.CMS .Con_id{clear:both;background:#FF9900;height:70px;text-align:center;}
.CMS .ul_id1 {background:#000000;}
.CMS .ul_id1 .Li_id0{color:#FFFF00;}
.CMS .ul_id2 {background:#FF6600;}
.CMS .ul_id2 .Li_id1{color:#FFFF00;}
.CMS .ul_id3 {background:#3366FF;}
.CMS .ul_id3 .Li_id2{color:#FFFF00;}
.CMSbox{}
</style>
<script language="javascript">
//获取可操作的ID
function GetObj(objID){
if(document.getElementById){
return eval('document.getElementById("' + objID + '")');
}
else{
if(document.layers){
return eval("document.layers['" + objID + "']");
}
else{
return eval('document.all.' + objID);
}
}
}
var Me;
function TagTab(arr){
this.curTab=arr[0];
this.arr = arr;
for(var i=0;i<arr.length;i++){
var lis = arr[i].getElementsByTagName("li");
for(var j=0;j<lis.length;j++){
lis[j].tag=j;
lis[j].fac=this;
lis[j].onmouseover =function(){
Me=this;
window.setTimeout("Me.fac.show("+this.tag+");",MDelayTime);
}
}
}
this.show = function(i){
this.curTab.style.display='none';
this.arr[i].style.display = 'block';
this.curTab = this.arr[i];
}
}
window.onload=function(){
var oneTab = new TagTab([GetObj("Con_id0"),GetObj("Con_id1"),GetObj("Con_id2")]);
var twoTab = new TagTab([GetObj("Con_id3"),GetObj("Con_id4"),GetObj("Con_id5")]);
}
//延迟标签
var MDelayTime=300;
</script>
</head>
<body>
<!--第一个切换实体 -->
<div class="CMS" id="CMS_id0">
<!--Con_id0-->
<div class="Con_id" id="Con_id0">
<div class="TabTop">
<ul class="ul_id1">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2" >广州</li>
</ul>
</div>
<div class="CMSbox">上海的内容</div>
</div>
<!--Con_id1-->
<div class="Con_id" id="Con_id1" style="display:none;">
<div class="TabTop">
<ul class="ul_id2">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2" >广州</li>
</ul>
</div>
<div class="CMSbox">北京的内容</div>
</div>
<!--Con_id2-->
<div class="Con_id" id="Con_id2" style="display:none;">
<div class="TabTop">
<ul class="ul_id3">
<li class="Li_id0" id="Tab_id0" >上海</li>
<li class="Li_id1" id="Tab_id1" >北京</li>
<li class="Li_id2" id="Tab_id2">广州</li>
</ul>
</div>
<div class="CMSbox">广州的内容</div>
</div>
</div>
<br>
<!--第二个切换实体 -->
<div class="CMS" id="CMS_id1">
<!--Con_id0-->
<div class="Con_id" id="Con_id3">
<div class="TabTop">
<ul class="ul_id1">
<li class="Li_id0" id="Tab_id3">广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5">山东</li>
</ul>
</div>
<div class="CMSbox">广东的内容</div>
</div>
<!--Con_id1-->
<div class="Con_id" id="Con_id4" style="display:none;">
<div class="TabTop">
<ul class="ul_id2">
<li class="Li_id0" id="Tab_id3" >广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5" >山东</li>
</ul>
</div>
<div class="CMSbox">江苏的内容</div>
</div>
<!--Con_id2-->
<div class="Con_id" id="Con_id5" style="display:none;">
<div class="TabTop">
<ul class="ul_id3">
<li class="Li_id0" id="Tab_id3">广东</li>
<li class="Li_id1" id="Tab_id4" >江苏</li>
<li class="Li_id2" id="Tab_id5">山东</li>
</ul>
</div>
<div class="CMSbox">山东的内容</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
相关推荐
-
JS实现跟随鼠标的链接文字提示框效果
本文实例讲述了JS实现跟随鼠标的链接文字提示框效果.分享给大家供大家参考.具体如下: 这里使用JavaScript与CSS实现链接提示效果,不会改变你原来的链接结构,使用链接原有的title标签来实现,如果之前你使用有title标签,那你几乎只需把JS代码拷贝到你的网页中即可.你会发现,运行本效果后,鼠标在链接上移动的话,文字提示框会跟随鼠标而移动位置. 运行效果如下图所示: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran
-
JS延时提示框实现方法详解
本文实例讲述了JS延时提示框实现方法.分享给大家供大家参考,具体如下: 提示框功能:当鼠标指向头像时,弹出一个信息框,鼠标可移动到信息框,当鼠标离开头像时信息框消失,当鼠标离开信息框时信息框消失. 实现功能思路: 1.获取元素. 2.当鼠标指向Div1时,Div2显示. 3.当鼠标离开Div1时,使Div2延迟0.5秒消失,这样以便有时间把鼠标移到Div2. 4.当鼠标指向Div2时,Div2显示.因为第3步设置setTimeout使Div2消失,所以把用clearTimeout()把setTi
-
Js 订制自己的AlertBox(信息提示框)
本文制作一个用户自定义的AlertBox,效果如图:js文件中插入如下代码: 复制代码 代码如下: // JScript 文件 // constants to define the title of the alert and button text. var ALERT_TITLE = "Oops!"; var ALERT_BUTTON_TEXT = "Close"; // over-ride the alert method only if this a new
-
页面右下角弹出提示框示例代码js版
复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+r
-
JS+CSS实现一个气泡提示框
分享一个气泡提示框,练习的技术有:(1)JS响应鼠标的事件:(2)纯CSS制作三角形. 效果这样: 这是html: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>气泡对话框</title> <script src="myBubbleTooltip.js"></script>
-
JS模仿MSN右下角弹出提示框代码
aa * { margin: 0px; padding: 0px; } html, body { height: 100%; } body { font-size: 14px; line-height: 24px; } #tip { position: absolute; right: 0px; bottom: 0px; height: 0px; width: 180px; border: 1px solid #CCCCCC; background-color: #eeeeee; padding
-
JS实现定时自动关闭DIV层提示框的方法
本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=
-
网页图片延时加载的js代码
实现原理 把所有需要延时加载的图片改成如下的格式: <img lazy_src="图片路径" border="0"/> 然后在页面加载时,把所有使用了lazy_src的图片都保存到数组里,然后在滚动时计算可视区域的top,然后把延时加载的图片中top小于当前可视区域(即图片出现在可视区域内)的图片的src的值用lazy_src的来替换(加载图片) 代码 lazyLoad=(function() { var map_element = {}; var el
-
js网页右下角提示框实例
本文实例讲述了js网页右下角提示框的实现方法,分享给大家供大家参考.具体方法如下: html代码部分如下: 复制代码 代码如下: <style type="text/css"> .messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:
-
JS实现定时页面弹出类似QQ新闻的提示框
还是在做联通IOM项目时遇到的一个需求,要求页面每隔半小时弹出一次提示消息(消息以类似QQ新闻的形式弹出).当时上网找的这么一个资料,已经不记得原文出处了 复制代码 代码如下: <html> <head> <title>JavaScript提示框</title> <script type="text/javascript"> <!-- /** * 类名:CLASS_MSN_MESSAGE * 功能:提供类似MSN消息框
-
JS仿百度搜索自动提示框匹配查询功能
1. 添加动态加载css文件 不需要引入css css全部在JS动态生成.2. 不需要额外的标签 只需要一个input输入框 并且默认指定一个class类名为 "inputElem" 当然也可以自己配置参数 还需要一个当前父级容器增加一个默认类名 parentCls(也可以自己配置),因为输入框匹配值后需要一个隐藏域 所以需要隐藏域增加一个class "hiddenCls" 当然也支持自己配置参数. 如下代码: 复制代码 代码如下: <div class=&q