首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一个js封装的不错的选项卡效果代码

Posted in Javascript onFebruary 15, 2008 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>三水点靠木 选项卡效果 3water.com</title> 
<script type="text/javascript"> 
/* 
    选项卡封装 
    by 井底的蛙 
    2008-2-4 
*/ 
opCard = function() 
{ 
    this.bind = new Array(); 
    this.index = 0;        //默认显示哪个选项卡，从0开始     this.style = new Array();        //["","",""] 
    this.overStyle = false;        //选项是否有over, out变换样式事件，样式为this.style[2] 
    this.overChange = false;        //内容是否用over, out直接激活 
    this.menu = false;                //菜单类型 
    this.nesting = [false,false,"",""];        //是否嵌套，后面2个参数是指定menu,info的子集深度所用id 
    this.auto = [false, 1000];        //自动滚动[true,2000] 
    this.timerID = null;            //自动播放的 
    this.menutimerID = null;        //菜单延时的 
    this.creat = function(func) 
    { 
        var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); 
        var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); 
        var my = this, i; 
        var argLen = arguments.length; 
        var arrM = new Array(); 
        if(this.nesting[0] || this.nesting[1])    // 有选项卡嵌套 
        {    // 过滤出需要的数据 
            var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; 
            var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; 
        } 
        else 
        { 
            var arrMenu = _arrMenu; 
            var arrInfo = _arrInfo; 
        } 
        var l = arrMenu.length; 
        if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要，你可以放一个空的在那占位。")} 
        // 修正 
        if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单，则没有自动运行，有over, out直接激活 
        // 循环添加各个事件等 
        for(i=0;i<l;i++) 
        { 
            arrMenu[i].cName = arrMenu[i].className; 
            arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]);        //加载样式，菜单的话统一样式 
            if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 
            { 
                if(this.overStyle || this.overChange)    // 有over, out 改变样式 或者 激活 
                { 
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} 
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} 
                } 
                arrMenu[i].onclick = function(){if(argLen==1){func()}} 
                arrInfo[i].style.display = "none"; 
                continue; 
            } 
            if(i!=this.index || this.menu){arrInfo[i].style.display="none"};    //隐藏初始化，菜单的话全部隐藏 
            arrMenu[i].index = i;    //记录自己激活值[序号] 
            arrInfo[i].index = i; 
             
            if(this.overChange)    //有鼠标over, out事件 
            { 
                arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} 
                arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} 
            } 
            else    //onclick触发 
            { 
                arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} 
                if(this.overStyle)    // 有over, out 改变样式 
                { 
                    arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} 
                    arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} 
                } 
                else    // 没有over, out 改变样式 
                { 
                    if(this.auto[0])    // 有自动运行 
                    { 
                        arrMenu[i].onmouseover = function(){autoStop(this, 0);} 
                        arrMenu[i].onmouseout = function(){autoStop(this, 1);} 
                    } 
                } 
            } 
            if(this.auto[0] || this.menu)    //arrinfo 控制自动播放 
            { 
                arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} 
                arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} 
            } 
        }    //for结束 
        if(this.auto[0]) 
        { 
            this.timerID = setTimeout(autoMove,this.auto[1]) 
        } 
        // 自动播放 
        function autoMove() 
        { 
            var n; 
            n = my.index + 1; 
            if(n==l){n=0}; 
            while(arrMenu[n].getAttribute("skip"))        // 需要跳过的容器 
            { 
                n += 1; 
                if(n==l){n=0}; 
            } 
            changeOption(arrMenu[n]); 
            my.timerID = setTimeout(autoMove,my.auto[1]); 
        } 
        // onmouseover时，自动播放停止。num：0为over，1为out。 obj暂时无用。 -_-!! 
        function autoStop(obj, num) 
        { 
            if(!my.auto[0]){return;} 
            //if(obj.index==my.index) 
            num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); 
        } 
        // 改变选项卡 
        function changeOption(obj) 
        { 
            arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]);    //修改旧内容 
            arrInfo[my.index].style.display = "none";    //隐藏旧内容 
            obj.className = getClass(obj,my.style[1]);        //修改为新样式 
            arrInfo[obj.index].style.display = "";    //显示新内容 
            my.index = obj.index;    //更新当前选择的index 
        } 
        /*         
            只有onclick时，overStyle的onmouseover,onmouseout事件。用来预激活 
            obj：目标对象。    num：1为over，0为out 
        */ 
        function changeTitle(obj, num) 
        { 
            if(!my.overStyle){return;}; 
            if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} 
        } 
        /*         
            菜单类型时用 
            obj：目标对象。    num：1为over，0为out 
        */ 
        function changeMenu(num) 
        { 
            if(!my.menu){return;} 
            num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) 
        } 
        //关闭菜单 
        function menuClose() 
        { 
            arrInfo[my.index].style.display = "none"; 
            arrMenu[my.index].className = my.style[0]; 
        } 
        // 得到className（防止将原有样式覆盖） 
        function getClass(o, s) 
        { 
            if(o.cName==""){return s} 
            else{return o.cName + " " + s} 
        } 
        //嵌套情况下得到真正的子集 
        function getChilds(arrObj, id, num) 
        { 
            var depth = 0; 
            var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]);        //得到第一个子集 
            do    //计算深度 
            { 
                if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} 
                firstObj = firstObj.parentNode; 
            } 
            while(firstObj.tagName.toLowerCase()!="body")    // body强制退出。 
            var t; 
            var arr = new Array(); 
            for(i=0;i<arrObj.length;i++)    //过滤出需要的数据 
            { 
                t = arrObj[i], d = 0; 
                do 
                { 
                    if(t.parentNode.getAttribute("id")==id && d == depth) 
                    {     
                        arr.push(arrObj[i]);break;        //得到数据 
                    } 
                    else 
                    { 
                        if(d==depth){break};d+=1; 
                    } 
                    t = t.parentNode; 
                } 
                while(t.tagName.toLowerCase()!="body")    // body强制退出 
            } 
            return arr; 
        } 
    } 
} 
window.onload = function() 
{ 
    var aa = new opCard(); 
    aa.bind = ["a1","div","b1","div"]; 
    aa.style = ["a1_0","a1_1","a1_0"]; 
    aa.index = 0; 
    aa.nesting = [false,true,"",""] 
    aa.creat(); 
    aa =null; 
    // 默认的onclick中，第一个例子 
    var bba = new opCard(); 
    bba.bind = ["a2","li","b2","div"]; 
    bba.style = ["style1","style2","style3"]; 
    bba.overStyle = true; 
    bba.creat(); 
    bba = null; 
    // 默认的onclick中，第二个例子 
    var bbb = new opCard(); 
    bbb.bind = ["a3","li","b3","div"]; 
    bbb.style = ["style1","style2","style3"]; 
    bbb.overStyle = true; 
    bbb.creat(); 
    bbb = null; 
    // onmousover触发中的例子 
    var cc = new opCard(); 
    cc.bind = ["a4","li","b4","div"]; 
    cc.style = ["style1","style2","style3"]; 
    cc.overStyle = true; 
    cc.overChange = true; 
    cc.creat(); 
    cc = null; 
    //自动播放auto第一个例子 
    var dd = new opCard(); 
    dd.bind = ["a5","li","b5","div"]; 
    dd.style = ["style1","style2","style3"]; 
    dd.auto = [true, 3000]; 
    dd.creat(); 
    dd = null; 
    //自动播放auto第二个例子 
    var ee = new opCard(); 
    ee.bind = ["a6","li","b6","div"]; 
    ee.style = ["style1","style2","style3"]; 
    ee.auto = [true, 2000]; 
    ee.overChange = true; 
    ee.creat(); 
    ee = null; 
    //自动播放auto第三个例子 
    var ff = new opCard(); 
    ff.bind = ["a7","li","b7","div"]; 
    ff.style = ["style1","style2","style3"]; 
    ff.auto = [true, 1000]; 
    ff.overChange = true; 
    ff.overStyle = true; 
    ff.creat(); 
    ff = null; 
    //菜单导航例子 
    var gg = new opCard(); 
    gg.bind = ["a8","li","b8","div"]; 
    gg.style = ["style1","style2","style3"]; 
    gg.overStyle = true; 
    gg.menu = true; 
    gg.creat(); 
    gg = null; 
    //其他应用 
    var hh = new opCard(); 
    hh.bind = ["a9","li","a9","li"]; 
    hh.style = ["style4","style4","style4"]; 
    //hh.overStyle = true; 
    hh.auto = [true, 1000]; 
    hh.creat(); 
    hh = null; 
} 
</script> 
<style type="text/css"> 
body{font-size:12px; font-family:Verdana,"宋体";} 
p,ul{margin:0px; padding:0px;} 
td,div{font-size:12px} 
.a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} 
.a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} 
.test{text-decoration:underline;} 
#b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} 
#b1 div.s strong{color:#0066FF;} 
/* */ 
.style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
.style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
.style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} 
#a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} 
#b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} 
#b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} 
#b8 div a{margin-right:20px;} 
.style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} 
</style> 
</head> 
<body> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td id="a1" width="140" valign="top" align="center"> 
        <div class="test">简单介绍</div> 
        <div class="test">默认的onclick</div> 
        <div class="test">onmousover触发</div> 
        <div class="test">自动播放auto</div> 
        <div class="test">菜单导航</div> 
        <div class="test">关于嵌套</div> 
        <div class="test">其他应用</div> 
        <div class="test">一些说明</div> 
        <div class="test"> </div> 
        <div class="test"> </div> 
        <div class="test"> </div> 
        <div class="test"> </div> 
    </td> 
    <td id="b1" valign="top"> 
        <div class="s"> 
            封装了一个选项卡，不过已经不像选项卡了-_-!!!<br><br> 
            现稍微说明下吧，如果不明白的话，旁边有几个例子可能说明起来更清楚些<br><br> 
            <p> 
            <strong>obj.bind = ["a1","td","b1","div"];</strong><br> 
            绑定id="a1"下的td标签为菜单，绑定id="b1"下的div标签为内容，简单么？<br> 
            td标签的数量和div标签的数量必须相同<br> 
            （若不需要显示内容，只显示菜单话，可以这个在td标签上加<td skip="true">）<br> 
            如果id="a1"下的td标签有嵌套表格，这样的话，就不是所有的td都是菜单，这时候需要用下nesting<br><br> 
            <strong>obj.nesting = [false,true,"",""];</strong><br> 
            当标签tag有嵌套时，需要用到这个<br> 
            比如选项卡内容是放在div容器里，而本身这个内容里也有div标签，这时就需要用到<br> 
            菜单嵌套为false，内容嵌套为true，且会自动判断出内容标签，多数时候这样就可以了<br> 
            判断方法为，认定getElementsByTagName后第一个标签为内容第一项，其他的就用这个第一项的深度来判断<br> 
            但有些情况下，这样还是不行<br> 
            我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];<br> 
            这样就肯定不会错了（不明白的话看下例子就简单多了）<br><br> 
            <strong>obj.index = 0;</strong><br> 
            默认显示第几个选项卡，序号从0开始<br><br> 
            <strong>obj.style = ["c1","c2","c3"]</strong><br> 
            菜单加载的样式的className：<br> 
            菜单未选中的className是c1<br> 
            菜单选中的className是c2<br> 
            菜单onmouseover的className是c3<br><br> 
            <strong>obj.overStyle = false;</strong><br> 
            选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容]，对应的样式为style[2]<br><br> 
            <strong>obj.overChange = false;</strong><br> 
            选项卡内容是否用onmouseover, onmouseout直接激活<br><br> 
            <strong>obj.menu = false;</strong><br> 
            选项卡是菜单类型<br><br> 
            <strong>obj.auto = [false, 1000];</strong><br> 
            选项卡是否自动播放，播放速度（毫秒）<br><br> 
            <strong>obj.creat();</strong><br> 
            开始生成选项卡，需要onclick触发事件的话，可以obj.creat(函数名)<br> 
            所有的都会触发 
            </p> 
        </div> 
        <div class="s"> 
        <!--默认的onclick中，第一个例子--> 
          <div id="a2"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li>3</li> 
              <li>4</li> 
            </ul> 
          </div> 
          <div id="b2"> 
            <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over，out改变样式,但不激活)</div> 
            <div> 
                var bba = new opCard();<br> 
                bba.bind = ["a2","li","b2","div"];<br> 
                bba.style = ["style1","style2","style1"];<br> 
                bba.overStyle = true;<br> 
                bba.creat();<br> 
                bba = null; 
            </div> 
            <div>33333</div> 
            <div>4444444</div> 
          </div><br> 
        <!--默认的onclick中，第二个例子--> 
          <div id="a3"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li>3</li> 
              <li skip="true">4</li> 
            </ul> 
          </div> 
          <div id="b3"> 
            <div> 
                这个例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以选项卡4是没有内容的<br> 
                你可以为选项卡的文字直接加上链接，我这里就不加了 
            </div> 
            <div>222222</div> 
            <div>33333</div> 
            <div>4444444</div> 
          </div> 
        </div> 
        <div class="s"> 
        <!--onmousover触发中的例子--> 
          <div id="a4"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li skip="true">3</li> 
              <li>4</li> 
            </ul> 
          </div> 
          <div id="b4"> 
            <div>这个例子是用onmouseover触发的<br>(over，out直接激活)<br>并且<li skip="true">3</li>[选项卡3不会被激活]<br>overStyle = true;</div> 
            <div> 
                var cc = new opCard();<br> 
                cc.bind = ["a4","li","b4","div"];<br> 
                cc.style = ["style1","style2","style1"];<br> 
                cc.overStyle = true;<br> 
                cc.overChange = true;<br> 
                cc.creat();<br> 
                cc = null; 
            </div> 
            <div>33333</div> 
            <div>4444444</div> 
          </div> 
        </div> 
        <div class="s"> 
        <!--自动播放auto第一个例子--> 
          <div id="a5"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li>3</li> 
              <li>4</li> 
            </ul> 
          </div> 
          <div id="b5"> 
            <div>1111111<br>我每3秒切换一个选项卡</div> 
            <div> 
                var ee = new opCard();<br> 
                ee.bind = ["a6","li","b6","div"];<br> 
                ee.style = ["style1","style2","style1"];<br> 
                ee.auto = [true, 2000];<br> 
                ee.overChange = true;<br> 
                ee.creat();<br> 
                ee = null; 
            </div> 
            <div>33333<br>我每3秒切换一个选项卡</div> 
            <div>4444444<br>我每3秒切换一个选项卡</div> 
          </div> 
          <div>注：<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div> 
          <!--自动播放auto第二个例子--> 
          <div id="a6"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li>3</li> 
              <li>4</li> 
            </ul> 
          </div> 
          <div id="b6"> 
            <div>1111111<br>我每2秒切换一个选项卡</div> 
            <div> 
                var dd = new opCard();<br> 
                dd.bind = ["a5","li","b5","div"];<br> 
                dd.style = ["style1","style2","style1"];<br> 
                dd.auto = [true, 3000];<br> 
                dd.creat();<br> 
                dd = null;<br> 
            </div> 
            <div>33333<br>我每2秒切换一个选项卡</div> 
            <div>4444444<br>我每2秒切换一个选项卡</div> 
          </div> 
          <div><br>下面这个再来个<li skip="true">3</li>，且overStyle=true;</div> 
          <!--自动播放auto第三个例子--> 
          <div id="a7"> 
            <ul> 
              <li>1</li> 
              <li>2</li> 
              <li skip="true">3</li> 
              <li>4</li> 
            </ul> 
          </div> 
          <div id="b7"> 
            <div>1111111<br>我每1秒切换一个选项卡</div> 
            <div> 
                var ff = new opCard();<br> 
                ff.bind = ["a7","li","b7","div"];<br> 
                ff.style = ["style1","style2","style1"];<br> 
                ff.auto = [true, 1000];<br> 
                ff.overChange = true;<br> 
                ff.overStyle = true;<br> 
                ff.creat();<br> 
                ff = null; 
            </div> 
            <div>33333<br>我每1秒切换一个选项卡</div> 
            <div>4444444<br>我每1秒切换一个选项卡</div> 
          </div> 
        </div> 
        <!--菜单导航的例子--> 
        <div class="s"> 
          <div id="a8"> 
            <ul> 
              <li skip="true">首页</li> 
              <li>新闻</li> 
              <li>论坛</li> 
              <li skip="true">联系我们</li> 
            </ul> 
          </div> 
          <div id="b8"> 
            <div></div> 
            <div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div> 
            <div><a href="#">蓝色理想</a><a href="#">blue idea</a></div> 
            <div></div> 
          </div> 
          <div><strong>注：菜单延时一秒关闭</strong><br>这里只是演示，实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持，没试过</div> 
        </div> 
        <div class="s"> 
            我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br> 
            所以如您所见，这个演示本身就是一个嵌套，效果还不错 
        </div> 
        <!--其他应用--> 
        <div class="s"> 
            比如图片切换什么，不过我太懒了，不写了。。。<br> 
            这个能干什么，我也不知道。。 
            <div id="a9"> 
              <li>新年好啊</li> 
              <li>快过年了</li> 
              <li>天好冷啊</li> 
              <li>大家去抢红包吧</li> 
              <li>红包~！红包~！你在哪里啊？</li> 
            </div>             
        </div> 
        <div class="s"> 
            选项卡标题（或者菜单）必须和选项卡内容的数量相同，否则会出错<br>即使选项卡菜单skip="true"，内容也要放一个空的标签占位<br> 
            其他好像暂时没发现什么<br><br> 
            本来打算加入ajax的，但有些还没想好。<br> 
            效率的话，应该还行，我这个演示放了几个选项卡，似乎还不错<br><br> 
            写这个的目的就是以后弄选项卡只要处理样式就可以了，很多选项卡或者切换之类都是大同小异<br> 
            本来是打算弄些特效在里面，考虑会增加不少代码，所以不加了，简洁点。<br><br> 
            哦，还有选项卡是附加样式，不会取消原本设置的样式<br> 
            如左边的下划线是原有的样式 
        </div> 
        <div class="s">啥都没有1</div> 
        <div class="s">啥都没有2</div> 
        <div class="s">啥都没有3</div> 
        <div class="s">啥都没有4</div> 
    </td> 
  </tr> 
</table> 
</body> 
</html>

一个js封装的不错的选项卡效果代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JS实现图片翻书效果示例代码
Sep 09 Javascript
关闭时刷新父窗口两种方法
May 07 Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
vue-router中scrollBehavior的巧妙用法
Jul 09 Javascript
vue全局使用axios的方法实例详解
Nov 22 Javascript
js类的继承定义与用法分析
Jun 21 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
ImageFlow可鼠标控制图片滚动
Jan 30 #Javascript
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 #Javascript
Javascript优化技巧（文件瘦身篇）
Jan 28 #Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 #Javascript
JavaScript 数组的 uniq 方法
Jan 23 #Javascript
Javascript 更新 JavaScript 数组的 uniq 方法
Jan 23 #Javascript
Javascript 各浏览器的 Javascript 效率对比
Jan 23 #Javascript
横向滚动(1) 共享文件夹(1) 加载异常(1) ESXI(1) caddy(1) SVN(1) Slave(1) 骨架屏(1) 表约束(2) NginxConfig(1)
You might like
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php中stdClass的用法分析
2015/02/27 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
js实现右键菜单功能
2016/11/28 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
vue+VeeValidate 校验范围实例详解（部分校验,全部校验）
2018/10/19 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python操作MySQL简单实现方法
2015/01/26 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Apache如何部署django项目
2017/05/21 Python
Python 含参构造函数实例详解
2017/05/25 Python
Python 操作文件的基本方法总结
2017/08/10 Python
python基于K-means聚类算法的图像分割
2019/10/30 Python
虚拟环境及venv和virtualenv的区别说明
2021/02/05 Python
美国学校用品、教室和教学商店：Discount School Supply
2018/04/04 全球购物
FC-Moto瑞典：欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
Abbacino官网：包、钱包和女士配饰
2019/04/15 全球购物
项目开发计划书
2014/01/09 职场文书
党员组织关系介绍信
2014/02/13 职场文书
学校教师安全责任书
2014/07/23 职场文书
承诺函范文
2015/01/21 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
小学感恩主题班会
2015/08/12 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis