Rss订阅

首页 »Javascript教程 » tab滑动门效果:javascript 通用滑动门tab类 »正文

tab滑动门效果:javascript 通用滑动门tab类

来源: 发布时间:星期六, 2008年12月27日浏览:80次评论:0

点击运行可以看到效果:

<!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; char<img src='/icons/81842set.gif' />=gb2312" /> 
<title>滑动门通用JS</title> 
<style type="text/css"> 
 
</style> 
 
</head> 
<body> 
 
    <h1 <img src='/icons/81842class.gif' />="t_rt"> 
        滑动门封装类 
    </h1> 
     
    <h2> 
        效果预览 
    </h2> 
     
     
         
            <ul <img src='/icons/81842class.gif' />="scrollUl"> 
                <li <img src='/icons/81842class.gif' />="sd01" id="m01">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="m02">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="m03">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="m04">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="m05">滑动门</li> 
            </ul> 
             
                 
                    第<img src='/icons/81842yi.gif' />层内容 
                <br/> 
                 
                    第 2层内容 
                <br/> 
                 
                    第 3层内容 
                <br/> 
                 
                    第 4层内容 
                <br/> 
                 
                    第 5层内容 
                <br/> 
            <br/> 
        <br/> 
    <br/> 
     
     
         
            <ul <img src='/icons/81842class.gif' />="scrollUl"> 
                <li <img src='/icons/81842class.gif' />="sd01" id="mm01">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mm02">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mm03">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mm04">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mm05">滑动门</li> 
            </ul> 
             
                 
                    第<img src='/icons/81842yi.gif' />层内容 
                <br/> 
                 
                    第 2层内容 
                <br/> 
                 
                    第 3层内容 
                <br/> 
                 
                    第 4层内容 
                <br/> 
                 
                    第 5层内容 
                <br/> 
            <br/> 
        <br/> 
    <br/> 
     
     
         
            <ul <img src='/icons/81842class.gif' />="scrollUl"> 
                <li <img src='/icons/81842class.gif' />="sd01" id="mmm01">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mmm02">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mmm03">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mmm04">滑动门</li> 
                <li <img src='/icons/81842class.gif' />="sd02" id="mmm05">滑动门</li> 
            </ul> 
             
                 
                    第<img src='/icons/81842yi.gif' />层内容 
                <br/> 
                 
                    第 2层内容 
                <br/> 
                 
                    第 3层内容 
                <br/> 
                 
                    第 4层内容 
                <br/> 
                 
                    第 5层内容 
                <br/> 
            <br/> 
        <br/> 
    <br/> 
     
<br/> 
</body> 
</html>

scrollDoor

;
SDmodel.sd([菜单id

],[显示层id

],"菜单触发类","菜单关闭类");
SDmodel.sd([菜单id

2],[显示层id

2],"菜单触发类","菜单关闭类");
SDmodel.sd([菜单id

3],[显示层id

3],"菜单触发类","菜单关闭类");
</script>

其中sd思路方法中

参数为:
参数

[菜单id

]:滑动门菜单

id
参数 2 [内容id

]:显示和隐藏滑动内容层

id
参数 3 "菜单触发类":鼠标经过滑动门菜单

类
参数 4 "菜单关闭类":鼠标滑出滑动门菜单

类
3.页面中有几个滑动门就

几次sd

,只需改变sd

参数,如以上代码上所展示.

标签：javascript类 javascript定义类 javascripttab tab滑动门效果

下载文章的 PDF文档电子版离线看

我顶

专注于互联网--专注于架构

首页 »Javascript教程 » tab滑动门效果:javascript 通用滑动门tab类 »正文

tab滑动门效果:javascript 通用滑动门tab类

相关文章

读者评论

发表评论

热门标签

精华推荐

最新标签

Dig排行

阅读排行

最新文章