JavaScript特效一（网页换肤、鼠标移到头像上获取个人信息getByClass）

一.网页换肤，样式自备。

1.window.onload=function(){
        var oBtn1 = document.getElementById('btn1');
        var oBtn2 = document.getElementById('btn2');
        var oLink = document.getElementById('link1');

       //直接改变link的href属性。

        oBtn1.onclick=function(){
            oLink.href="css1.css";
        }

        oBtn2.onclick=function(){
            oLink.href="css2.css";
        }
    }

二.鼠标移到头像上获取个人信息

1.封装getByClass方法

oPrent父元素的ID，oClass为要获取的类名

function getByClass(oPrent,oClass){
    //获取父元素下所有的元素
    var aEle = oPrent.getElementsByTagName('*');
    var i    = 0;

    //定义一个空数组
 var aResult = [];

    for(i=0;i<aEle.length;i++)
    {
        //遍历所有的元素

        if(aEle[i].className==oClass){
            if(oClass=='photo_content')
            {

                //push()向数组末端添加一个元素
                aResult.push(aEle[i].getElementsByTagName('img')[0])

            }
            else {

                //push()向数组末端添加一个元素
                aResult.push(aEle[i]);

            }
        }
    }
    return aResult;
}

window.onload=function ()
{
    //后去父元素ID
    var oMessage = document.getElementById('message');

    //通过getByClass方法获取所有类名为user_info元素。
    var aUser_info = getByClass(oMessage,'user_info');

    //通过getByClass方法获取所有类名为photo_content元素下的img元素。
    var aImg = getByClass(oMessage,'photo_content');

    //遍历aImg和aUser_info里所有的元素
      for (var i = 0; i < aImg.length; i++) {

          aImg[i].index = i;//设置当前元素下标、

          //为当前元素添加鼠标移入事件
          aImg[i].onmouseover=function(){

          //为当前元素设置display属性，显示当前样式

            aUser_info[this.index].style.display='block';

          }

           aUser_info[i].index = i;//设置当前元素下标

          //为当前元素设置display属性，显示当前样式

          aUser_info[i].onmouseover=function(){

            aUser_info[this.index].style.display='block';

          }
          //为当前元素设置display属性，隐藏当前样式

          aUser_info[i].onmouseout = function(){

            aUser_info[this.index].style.display='none';

          }
          
      }
}

三.播放列表

<script type="text/javascript">

        window.onload=function(){

            var oWrap = document.getElementById('wrap');

            //获取父元素下第一个h2标签的元素

            var oUp      = oWrap.getElementsByTagName('h2')[0];

               //获取父元素下第一个ul标签的元素

            var oUl      = oWrap.getElementsByTagName('ul')[0];

            oWrap.onclick=function(){
                if (oUl.style.display=='none') {
                    oUl.style.display='block';
                    oUp.style.className='up';
                }
                else
                {
                    oUp.style.className='down';
                    oUl.style.display='none';
                }
            }
        }