源码网商城，靠谱的源码在线交易网站我的订单购物车帮助

当前位置：首页 > 资讯 > 技术文档

js通用滑动门类

时间：2021-05-02 10:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：js通用滑动门类

<meta content="text/html; charset=gb2312" http-equiv="Content-Type"></meta> 
滑动门通用JS 
 
 
 
 
<div class="bodyer"> 
    <h1 class="t_rt"> 
        滑动门封装类 
    </h1> 
     
    [h1] 
        效果预览 
    [/h1] 
     
    <div class="preview"> 
        <div class="scrolldoorFrame"> 
            [list] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
            [/list] 
            <div class="bor03 cont"> 
                <div id="c01"> 
                    第一层内容 
                </div> 
                <div class="hidden" id="c02"> 
                    第二层内容 
                </div> 
                <div class="hidden" id="c03"> 
                    第三层内容 
                </div> 
                <div class="hidden" id="c04"> 
                    第四层内容 
                </div> 
                <div class="hidden" id="c05"> 
                    第五层内容 
                </div> 
            </div> 
        </div> 
    </div> 
     
    <div class="preview"> 
        <div class="scrolldoorFrame"> 
            [list] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
            [/list] 
            <div class="bor03 cont"> 
                <div id="cc01"> 
                    第一层内容 
                </div> 
                <div class="hidden" id="cc02"> 
                    第二层内容 
                </div> 
                <div class="hidden" id="cc03"> 
                    第三层内容 
                </div> 
                <div class="hidden" id="cc04"> 
                    第四层内容 
                </div> 
                <div class="hidden" id="cc05"> 
                    第五层内容 
                </div> 
            </div> 
        </div> 
    </div> 
     
    <div class="preview"> 
        <div class="scrolldoorFrame"> 
            [list] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
                [*]滑动门[/*] 
            [/list] 
            <div class="bor03 cont"> 
                <div id="ccc01"> 
                    第一层内容 
                </div> 
                <div class="hidden" id="ccc02"> 
                    第二层内容 
                </div> 
                <div class="hidden" id="ccc03"> 
                    第三层内容 
                </div> 
                <div class="hidden" id="ccc04"> 
                    第四层内容 
                </div> 
                <div class="hidden" id="ccc05"> 
                    第五层内容 
                </div> 
            </div> 
        </div> 
    </div> 
     
    [h1] 
        源代码 
    [/h1] 
     
    <div class="textDiv"> 
        <textarea id="sourse"> 
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; 
} 
} 
        </textarea>

[h1] 使用方法 [/h1]

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调用的参数,如以上代码上所展示.

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：JS简单限制textarea内输入字符数量的方法
下一篇：document.forms[].submit()使用介绍

资讯排行榜
更多>>

关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明 | 网站地图

苏ICP备2024110244号-2 苏公网安备32050702011978号增值电信业务经营许可证编号：苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部