划拓汽车网

全部频道

您的当前位置：首页div+CSS滑动门特效_html/css

div+CSS滑动门特效_html/css

来源：划拓汽车网


滑动门是一种只需要鼠标悬停便可自动切换板块的JS特效。需要说明的是如果要减少板块，一定要把JS特效中的相应的板块li的id去掉，否则无法正常显示。比如要将第五项“
  • 滑动门
    • ”、“ 第五层内容 ”这两个删除的话也一定要把JS特效中的m05、mm05、mmm05和c05、cc05、ccc05删除，才能正常显示。





    滑动门






  • 滑动门

  • 滑动门

  • 滑动门

  • 滑动门

  • 滑动门



    • 第一层内容
    第二层内容
    第三层内容
    第四层内容
    第五层内容



    function scrollDoor(){
    }
    scrollDoor.prototype = {
    sd : function(menus,divs,openClass,closeClass){
    var _this = this;
    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.getElementByIdx(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");
    }




    首页



    1. 嘿嘿，无视容器原始class值。


    测试



    1. 继续无视h3原始class值。


    无聊



    1. h3没有值也可以～


    傻蛋



    1. div没有值一样可以～




    首页



    嘿嘿，无视h3原始class值。



    测试



    继续无视div原始class值。



    无聊



    h3没有值也可以～



    傻蛋



    class值相似一样也可以～



    指定class后，即时再多一个div也行。






    function Pid(id,tag){
    if(!tag){
    return document.getElementByIdx(id);
    }
    else{
    return document.getElementByIdx(id).getElementsByTagName_r(tag);
    }
    }

    function tab(id,hx,box,iClass,s,pr){
    var hxs=Pid(id,hx);
    var boxs=Pid(id,box);
    if(!iClass){ // 如果不指定class，则：
    boxsClass=boxs; // 直接使用box作为容器
    }
    else{ // 如果指定class，则：
    var boxsClass = [];
    for(i=0;i if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配
    boxsClass.push(boxs[i]);
    }
    }
    }
    if(!pr){ // 如果不指定预展开容器，则：
    go_to(0); // 默认展开序列
    yy();
    }
    else {
    go_to(pr);
    yy();
    }
    function yy(){
    for(var i=0;i hxs[i].temp=i;
    if(!s){// 如果不指定事件，则：
    s="onmouseover"; // 使用默认事件
    hxs[i][s]=function(){
    go_to(this.temp);
    }
    }
    else{
    hxs[i][s]=function(){
    go_to(this.temp);
    }
    }
    }
    }
    function go_to(pr){
    for(var i=0;i if(!hxs[i].tmpClass){
    hxs[i].tmpClass=hxs[i].className+=" ";
    boxsClass[i].tmpClass=boxsClass[i].className+=" ";
    }
    if(pr==i){
    hxs[i].className+=" up"; // 展开状态：标题
    boxsClass[i].className+=" up"; // 展开状态：容器
    }
    else {
    hxs[i].className=hxs[i].tmpClass;
    boxsClass[i].className=boxsClass[i].tmpClass;
    }
    }
    }
    }
    tab("tab01","h3","div","","onclick",2); tab("tab01","h4","ol");tab("tab02","h3","div","tab");
    //-->


    显示全文