案例一 鼠标经过事件,变色 移动

2018-05-28  本文已影响0人  王哲胜

一. 鼠标经过字体内容和背景变色

二.例:

饿哦

额,额,额

取想想天哥

博毛福禄寿

红草拨清波

        var z=document.getElementsByClassName('zi')[0];

//       console.log(z);

        z.onmouseover=function(){

            z.style.color='cyan';

            document.body.style.background='pink';

        }

          z.onmouseout=function(){

               z.style.color='orange';

            document.body.style.background='purple';

          }

二.输入框内容点击按钮移动到另一个输入框

例:

    

    Document

    

select{width:100px;height:85px;}

div{display:inline-block;width:50px}

    

Argentina

    Brazil

    Canada

    Chile

    China

    Cuba

    Denmark

    Egypt

    France

    Greece

    Spain

>>

>

<

<<

      var ar=[],se=[];

        ar=unsel.innerHTML.replace(/\s+/,'')

                           .slice(8,-13)

                           .split(/<\/option>\s*

        console.log(ar);

        function move(bt){

        switch(bt.innerHTML){

            case '>>':

                se=se.concat(ar);

                ar=[];

                break;

            case '>':

            case '<':

            case '<<':

                ar=ar.concat(se);

                se=[];

                break;

        }

             update(ar,unsel);

            update(se,sel);

        }

        function update(arr,sel){

            sel.innerHTML=''+arr.join('')+'';

        }

一.导航

例:

    

    Document

    

        *{

            margin: 0;

            padding: 0;

           list-style: none;

        }

        ul{

            width:1200px;

            height: 50px;

            float: left;

            line-height: 50px;

            background: cyan;

            margin: 0 auto;

        }

        li{

        float: left;

            width: 100px;

        }

        a{

            width: 100px;

            text-align: center;

            text-decoration: none;

            display: inline-block;

            color:white;

        }

    

        

  • 主页
  • 主播
  • 好咯
  • 好咯
  •     

           var se=document.querySelectorAll('ul>li');

            for(var i=0;i

                se[i].onmouseover=function(){

                    this.firstElementChild.style.color='cyan';

                    this.style.background='white';

                }

                 se[i].onmouseout=function(){

                    this.firstElementChild.style.color='white';

                    this.style.background='cyan';

                }

            }

    上一篇 下一篇

    猜你喜欢

    热点阅读