史上最简单的CSS 滑动门效果,无JS哦!

benba · 发表于 2009-2-12 20:08:06

本帖最后由 benba 于 2009-10-27 10:50 编辑

一真想搞个简单的滑动门效果.去站长论坛也看了.一直没有搞到好的.终于被我发现了一个很不错的方法一样可以做滑动门.不需要写大量的JS .一看就明白.

没有写CSS 控制.只看效果.其它的自己去发挥吧!

<div id="top_right">
<ul>
<li><a href="#" onmouseover="test2.style.display='none';test3.style.display='none';test1.style.display='block'">菜单1</a></li>
<li><a href="#" onmouseover="test1.style.display='none';test3.style.display='none';test2.style.display='block';">菜单1</a></li>
<li><a href="#" onmouseover="test1.style.display='none';test2.style.display='none';test3.style.display='block';">菜单1</a></li>
</ul>
<div id="test1">
我是菜单1里的内容
</div>
<div id="test2" style="display=none">
我是菜单2里的内容
</div>
<div id="test3" style="display=none">
我是菜单3里的内容
</div>
</div>

复制代码

思路是这样的.当把光标放到菜单1上页就把test2和test3给隐藏起来.放到菜单2上就把test1和test3隐藏起来.放到菜单3上把test1和test2隐藏起来.就达到了滑动门的效果.

RobinQu · 发表于 2009-2-12 20:42:40

onmouseover里面不就是js么……

benba · 发表于 2009-2-12 20:51:00

牛角尖钻着好玩吗?

ug8 · 发表于 2009-2-12 21:19:01

效果预览
滑动门滑动门滑动门滑动门滑动门第一层内容
第二层内容
第三层内容
第四层内容
第五层内容
滑动门滑动门滑动门滑动门滑动门第一层内容
第二层内容
第三层内容
第四层内容
第五层内容
滑动门滑动门滑动门滑动门滑动门第一层内容
第二层内容
第三层内容
第四层内容
第五层内容

<!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">

</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).value = i;
_this.$(menus).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>

使用方法

1.把以上代码引进你的页面

<script type="text/javascript" src="scrollDoor.js"></script>

2.在页面的"<body>"标签前加入以下代码:

<script type="text/javascript">
var SDmodel = new scrollDoor();
SDmodel.sd([菜单id数组],[显示层id数组],"菜单触发类","菜单关闭类");
SDmodel.sd([菜单id数组2],[显示层id数组2],"菜单触发类","菜单关闭类");
SDmodel.sd([菜单id数组3],[显示层id数组3],"菜单触发类","菜单关闭类");
</script>

其中sd方法中的参数为：

参数一 [菜单id数组]：滑动门菜单的id参数二 [内容id数组]：显示和隐藏滑动内容层的id参数三 "菜单触发类"：鼠标经过滑动门菜单的类参数四 "菜单关闭类"：鼠标滑出滑动门菜单的类3.页面中有几个滑动门就调用几次sd函数,只需改变sd调用的参数,如以上代码上所展示.

：

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).value = i;
  _this.$(menus).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;
}
}

TAG: 滑动特效
上一篇：上一篇没有文章了下一篇：CSS+JS连续向上滚动的文字

ug8 · 发表于 2009-2-12 21:20:44

具体演示请看http://www.ug8888.com/html/59/n-114859.html

SSAY · 发表于 2009-2-12 21:21:21

呵呵,...................................有用,只是简单

abcnic1 · 发表于 2009-2-13 09:13:14

不错呵呵

心灵刺客 · 发表于 2009-2-13 12:48:26

有演示吗

egledzp · 发表于 2009-2-13 17:41:13

经典酷！

网海漂舟 · 发表于 2010-1-14 14:20:40

收藏下哦!!!!!!!!111

		自动登录	找回密码
密码			立即注册

[教程] 史上最简单的CSS 滑动门效果,无JS哦!

比较帮的滑动门封装类

[教程] 史上最简单的CSS 滑动门效果,无JS哦!

比较帮的 滑动门封装类

比较帮的滑动门封装类