- 浏览: 120944 次
- 性别:
- 来自: 南宁
-
文章分类
最新评论
<!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=gb2312" />
<title>滑动门通用JS</title>
<style type="text/css">
<!--
body{margin:0px;padding:0px;font-size:12px;background:#eee;line-height:20px;}
.bodyer{width:760px;margin:20px auto auto;border:1px dotted #ccc;background:#fff;}
.t_rt{text-align:right;}
h1,h2,h3,h4,h5,h6{font-weight:bold;margin:0px;padding:0px;font-size:12px;}
ul,li{margin:0px;padding:0px;}
li{list-style-type:none;}
h1{margin:10px;padding-right:10px;padding-bottom:5px;border-bottom:1px dotted #ccc;}
.preview{margin:10px;padding:10px;overflow:hidden;background:#eee;}
.cont{padding:10px;}
.cls{clear:both;}
.hidden{display:none;}
#sourse{border:1px dotted #ccc;width:600px;height:300px;margin:0px auto;}
.textDiv{margin:10px 40px 10px;text-align:center;}
h2{margin:0px 10px;background:#ccc;padding:5px;}
.example{margin:10px;background:#FFF;border:1px dotted #ccc;padding:10px;}
.scrolldoorFrame{width:400px;margin:0px auto;overflow:hidden;}
.scrollUl{width:400px;border-bottom:1px solid #CCC;overflow:hidden;height:35px;}
.scrollUl li{float:left;}
.bor03{border:1px solid #ccc;border-top-width:0px;}
.sd01{cursor:pointer;border:1px solid #CCC;background:#FFF;margin:5px;padding:2px;font-weight:bold;}
.sd02{cursor:pointer;border:0px solid #CCC;margin:5px;padding:2px;}
-->
</style>
<script type="text/javascript">
/*
十三妖
qq:181907667
msn:wl181907667@hotmail.com
邮箱:thirdteendevil@163.com
*/
function scrollDoor(){
}
scrollDoor.prototype = {
sd : function(menus,divs,openClass,closeClass){
var _this = this;
if(menus.length != divs.length)
{
alert("菜单层数量和内容层数量不一样!");
return false;
}
for(var i = 0 ; i < menus.length ; i++)
{
_this.$(menus[i]).value = i;
_this.$(menus[i]).onmouseover = function(){
for(var j = 0 ; j < menus.length ; j++)
{
_this.$(menus[j]).className = closeClass;
_this.$(divs[j]).style.display = "none";
}
_this.$(menus[this.value]).className = openClass;
_this.$(divs[this.value]).style.display = "block";
}
}
},
$ : function(oid){
if(typeof(oid) == "string")
return document.getElementById(oid);
return oid;
}
}
window.onload = function(){
var SDmodel = new scrollDoor();
SDmodel.sd(["m01","m02","m03","m04","m05"],["c01","c02","c03","c04","c05"],"sd01","sd02");
SDmodel.sd(["mm01","mm02","mm03","mm04","mm05"],["cc01","cc02","cc03","cc04","cc05"],"sd01","sd02");
SDmodel.sd(["mmm01","mmm02","mmm03","mmm04","mmm05"],["ccc01","ccc02","ccc03","ccc04","ccc05"],"sd01","sd02");
}
</script>
</head>
<body>
<div class="bodyer">
<h1 class="t_rt">
滑动门封装类
</h1>
<h2>
效果预览
</h2>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="m01">滑动门</li>
<li class="sd02" id="m02">滑动门</li>
<li class="sd02" id="m03">滑动门</li>
<li class="sd02" id="m04">滑动门</li>
<li class="sd02" id="m05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="c01">
第一层内容
</div>
<div id="c02" class="hidden">
第二层内容
</div>
<div id="c03" class="hidden">
第三层内容
</div>
<div id="c04" class="hidden">
第四层内容
</div>
<div id="c05" class="hidden">
第五层内容
</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mm01">滑动门</li>
<li class="sd02" id="mm02">滑动门</li>
<li class="sd02" id="mm03">滑动门</li>
<li class="sd02" id="mm04">滑动门</li>
<li class="sd02" id="mm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="cc01">
第一层内容
</div>
<div id="cc02" class="hidden">
第二层内容
</div>
<div id="cc03" class="hidden">
第三层内容
</div>
<div id="cc04" class="hidden">
第四层内容
</div>
<div id="cc05" class="hidden">
第五层内容
</div>
</div>
</div>
</div>
<div class="preview">
<div class="scrolldoorFrame">
<ul class="scrollUl">
<li class="sd01" id="mmm01">滑动门</li>
<li class="sd02" id="mmm02">滑动门</li>
<li class="sd02" id="mmm03">滑动门</li>
<li class="sd02" id="mmm04">滑动门</li>
<li class="sd02" id="mmm05">滑动门</li>
</ul>
<div class="bor03 cont">
<div id="ccc01">
第一层内容
</div>
<div id="ccc02" class="hidden">
第二层内容
</div>
<div id="ccc03" class="hidden">
第三层内容
</div>
<div id="ccc04" class="hidden">
第四层内容
</div>
<div id="ccc05" class="hidden">
第五层内容
</div>
</div>
</div>
</div>
</div>
</body>
</html>
文章出处：标准之路(http://www.aa25.cn/css_example/733.shtml)
发表评论
-
jQuery操作Table学习总结
2012-11-08 13:35 674jQuery在客户端操作Table学习：不过有很多很多的不足， ... -
模仿AJAX上传文件
2011-07-27 11:08 0首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:08 658首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 703首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
模仿AJAX上传文件
2011-07-27 11:07 896首先要说的就是 ajax 是无法实现上传文件的，可以想一下aj ... -
KindEditor-编辑器配置参数属性
2011-03-31 17:09 1830在《KindEditor-KindEditor简介》中提到了K ... -
js首页图片轮播
2011-01-12 17:05 1877<HTML><HEAD><TIT ... -
【转】 DIV+CSS+JS图片无缝滚动代码下载
2011-01-10 22:55 998DIV的图片无缝滚动,DIV 图片上无缝滚动,DIV 图片下无 ... -
js 滚动菜单
2011-01-10 22:51 671<html> <head> <m ... -
javascript跳转
2010-12-29 16:39 735js跳转页面方法大全<s ... -
新的右下脚消息
2010-12-25 00:42 410<SCRIPT language=JavaScript& ... -
右下角弹窗
2010-12-25 00:30 1563<html><body><sty ... -
js 操作 cookie
2010-12-20 14:57 701//设置cookies function setCookie( ... -
js全选单选集合
2010-10-30 09:05 1024<!DOCTYPE html PUBLIC " ... -
JS特效代码大全（四）js弹出对话框
2010-09-19 09:56 3573js弹出对话框在某些情况下是一个很好的工具，通过半透明的设置 ... -
js模式对话框控制
2010-09-19 09:45 1930Javascript有许多内建的方法来产生对话框，如：wind ... -
滑门技术
2010-09-08 14:45 609<!DOCTYPE HTML PUBLIC ... -
如何局部刷新js函数
2010-09-08 11:06 1208<script type="text/java ... -
自己写的js加密
2010-08-10 18:50 674<script>function changeTe ...
相关推荐
“实用JS滑动门”是一种通过结合JavaScript与CSS技术实现的一种动态菜单效果。在网页中，当用户点击顶部导航栏的不同选项时，其下方会显示出不同的子菜单列表，并以平滑过渡的形式展现给用户，这种效果通常称为...
js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果 js滑动门代码制作js滑动门导航鼠标滑过滑动门效果
"css+js滑动门小实用小实例"是一个集合，包含三个利用CSS和JavaScript技术构建的实用小示例，旨在展示如何创建美观且功能性的滑动门效果。滑动门效果通常用于导航菜单或者图像展示，它允许用户通过鼠标悬停或点击来...
JS滑动门式广告效果是一种常见的网页动态设计技术，它通过JavaScript实现页面上大图的自动轮播，为用户带来视觉上的吸引力，提高网站的互动性。这种效果通常被用在首页广告、产品展示或者新闻焦点等场景。下面将详细...
通过以上技术的组合，我们可以创建一个既美观又实用的JavaScript滑动门，实现英文字母切换的效果，提供类似淘宝购物索引的用户体验。在实际开发中，还需要考虑到兼容性问题，确保代码能在各种浏览器上正常运行，这...
在本教程中，我们将探讨如何利用JS实现滑动门效果，并结合XML数据进行分页显示。 滑动门效果，通常用于网站导航栏或菜单，它允许用户通过滑动或切换来展示不同内容。这种效果可以通过CSS和JavaScript配合实现，其中...
**超好用js滑动门**是一种常见的网页交互效果，主要应用于标签切换、焦点图切换等场景。这种技术能够提供动态、吸引人的用户体验，适用于网站的头部广告展示、产品展示等多个部分。它不仅实现了平滑的动画效果，还...
kutm滑动门源码kutm滑动门源码kutm滑动门源码
此“JS 滑动门式的图片导航推荐代码 网易财经.zip”压缩包文件提供了实现这种效果的代码示例，主要针对财经类网站的图片导航栏。该代码可能基于jQuery库，因为标签中提到了“jQuery”。 jQuery是一个轻量级、高性能...
JavaScript滑动门是一种常见的网页设计技术，主要用于导航菜单或图片展示，它利用JavaScript来实现元素的动态显示和隐藏，提供了一种优雅的方式来控制内容的显示。在这个案例中，我们将探讨如何利用JavaScript实现...
JavaScript（Js）滑动门效果是一种常见的网页交互设计，它通常用于导航菜单或者索引列表，使得用户可以方便地浏览和选择内容。在本案例中，我们关注的是一个仿淘宝购物索引的效果，这种效果常见于电商网站的商品分类...
【标题】"Js 滑动门 英文字母切换 仿淘宝购物索引效果"是一个JavaScript实现的项目，旨在创建一个类似于淘宝购物网站的索引条功能。这个索引条通常出现在商品列表的侧边，允许用户快速跳转到以特定英文字母开头的...
"CSS+JS滑动门式的图片轮番切换"是这种技术的一个实例，它结合了CSS（层叠样式表）和JavaScript两种前端技术来实现动态的图片展示。下面将详细讲解这一技术及其相关知识点。 首先，CSS在其中主要负责样式设计和布局...
JavaScript（JS）与CSS是构建网页动态效果和样式的核心技术，滑动门（Sliding Doors）是一种常见的前端设计技巧，常用于制作按钮、导航菜单等元素。这种技术利用CSS的背景定位和JavaScript的事件处理来实现元素的...
最后，JavaScript的加入可以为滑动门效果提供更高级的功能，比如触摸设备的支持或者自定义动画行为。虽然在本案例中没有具体提及JavaScript，但我们可以利用它来监听用户的点击事件，或者根据需要调整动画的性能。 ...
HTML调用JS实现多项滑动门选项卡特效是一种常见的前端技术，用于创建交互式和动态的网页内容。这种效果常用于导航菜单、内容切换、图片展示等场景，为用户提供更直观的操作体验。以下是对这个技术的详细解释： 一、...
在JavaScript和jQuery的世界里，"点击门"和"滑动门"是两种常见的交互效果，它们主要用于提升用户体验，尤其在网站导航和展示中。本文将详细介绍这两种效果以及如何使用提供的js插件实现它们。 首先，"点击门"效果...
滑动门（Sliding Doors）技术是网页设计中一种常见的CSS和JavaScript应用，主要用于创建具有动态效果的导航菜单或按钮。这种技术通过精确控制图像的显示部分，使得元素在鼠标悬停时能呈现出不同的视觉效果，给用户...
滑动门(js封装类,javascript,选项卡,滑动门,tag) 通用滑动门