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';

                }

            }

        }