求源码

来源:4-1 [DOM事件] QQ面板拖拽效果(上)

非常有喜

2017-03-06 17:24

请问这个有源码吗?还有各种图片,在哪里可以下载到

写回答 关注

2回答

  • 阿阿金
    2017-03-18 19:19:59

    视频的右下角,有“资料下载”下面的“源码”右面的“下载”就可以下载了啊!

  • 没事放放牛
    2017-03-06 20:50:30

    window.onload=function(){
       var box=document.getElementById('divselect'),
               title=box.getElementsByTagName('cite')[0],
               menu=box.getElementsByTagName('ul')[0],
               as=box.getElementsByTagName('a'),
               index=-1;

       // 点击三角时
       title.onclick=function(event){
           event=event || window.event;
           if(event.stopPropagation){
               event.stopPropagation();
           }else{
               event.cancelBubble=true;
           }
           menu.style.display='block';
           document.onkeyup=function(e){
               e=e || window.event;
               for(var i=0;i<as.length;i++){
                   as[i].style.background='none';
               }
               // 如果按下了向下方向键
               if(e.keyCode==40){
                   index++;
                   if(index>=as.length){
                       index=0;
                   }
                   as[index].style.background="#ccc";
               }
               // 如果按下了向上方向键
               if(e.keyCode==38){
                   if(index<=0){
                       index=as.length;
                   }
                   index--;
                   as[index].style.background="#ccc";
               }
               // 如果按下了回车键
               if(e.keyCode==13 && index!=-1){
                   title.innerHTML=as[index].innerHTML;
                   for(var i=0;i<as.length;i++){
                       as[i].style.background='none';
                   }
                   menu.style.display='none';
                   index=-1;
               }
           }
       }

       // 滑过滑过、离开、点击每个选项时
       for(var i=0;i<as.length;i++){
           as[i].onmouseover=function(){
               this.style.background='#ccc';
           }
           as[i].onmouseout=function(){
               this.style.background='none';
           }
           as[i].onclick=function(){
               title.innerHTML=this.innerHTML;
           }
       }

       // 点击页面空白处时
       document.onclick=function(){
           menu.style.display='none';
       }
    }

DOM事件探秘

DOM事件?本课程会通过实例来给小伙伴们讲解如何使用这些事件

99544 学习 · 1197 问题

查看课程

相似问题