鼠标事件——解压小黄人

html内容

< body onmouseover= "onSecondDelay(callback);"

onmousemove= "onSecondDelay(callback);"

onmouseout = "clearTimeout(timer);" >

     <!--全屏-->

     < div id= "screenBox" >

         < i class= "icon iconfont allScreen cursor" > &#xe6b3; </ i >

     </ div >

     <!-- 背景小黄人 -->

     < div class= "Illustrations" >

         < div class= "head" >

             < div class= "zhuangshi1" ></ div >

             < div class= "zhuangshi2" ></ div >

             < div class= "zhuangshi3" ></ div >

             < div class= "face" >

                

             </ div >

             < div class= "organ" >

                 < div class= "eyesleft eyes" ></ div >

                 < div class= "eyesright eyes" ></ div >

                 < div class= "mouth" >

                     < div class= "tongue" ></ div >

                 </ div >

             </ div >

         </ div >

     </ div >

</ body >

js：

var organ = $( '.organ')

// 眨眼

var timer = null;

function callback() {

     $( '.eyes'). addClass( 'Blink')

}

//判断停留时间

function onSecondDelay( callback) {

     clearTimeout( timer);

     timer = setTimeout( callback, 2000);

}

// 头部动画

let indexOf = 0

$( window). on( 'mousemove', move)

function move( ev) {

     $( '.eyes'). removeClass( 'Blink')

     var e = ev || ev. event;

     var headX = $( window). width() / 2; //a

     var headY = $( window). height() / 2; //a

     var mouseX = e. pageX; //b

     var mouseY = e. pageY; //b

     var headLeft = $( '.head'). width() / 2

     var headtop = $( '.head'). height() / 2

     var headWidth = headLeft - organ. width() / 2; //c

     var headHeight = headtop - organ. height() / 2; //c

     var allWidth = $( window). width(); //2a

     var allHeight = $( window). height(); //2a

     var organLeft = mouseX * headWidth / headX;;

     var organTop = mouseY * headHeight / headY;;

     var organRight = headWidth * mouseX / allWidth + organLeft;

     var organbottom = headHeight * mouseY / allHeight + organTop;

     indexOf++

     if ( mouseX - headX < 0) {

         organ. css({

             'left' : organLeft,

             'top' : organTop

        })

         $( '.face'). css( 'left', '-10px')

    } else {

         organRight = organLeft

         organbottom = organTop;

         organ. css({

             'left' : organRight,

             'top' : organbottom

        })

         $( '.face'). css( 'left', '10px')

    }

     //晕菜小黄人

     if ( indexOf >= 100) {

         $( '.organ'). css({

             'left' : '70px',

             'top' : '105px'

        })

         $( '.mouth'). addClass( 'mouse');

         $( '.tongue'). hide()

         $( window). unbind( 'mousemove')

         $( '.eyesleft'). addClass( 'eyesYunleft')

         $( '.eyesright'). addClass( 'eyesYunright')

         setTimeout( function () {

             $( '.eyesleft'). removeClass( 'eyesYunleft')

             $( '.eyesright'). removeClass( 'eyesYunright')

             $( '.mouth'). removeClass( 'mouse')

             $( '.tongue'). show()

             $( '.eyes'). addClass( 'Blink')

             $( window). bind( 'mousemove', move)

        }, 3000)

    }

}

setInterval( function () {

     indexOf = 0;

}, 2000)

var screenOnOff = false;

$( '.allScreen'). click( function () {

     if ( screenOnOff) {

         exitScreen()

         $( '.allScreen'). html( '&#xe6b3;')

         screenOnOff = ! screenOnOff

    } else {

         fullScreen()

         $( '.allScreen'). html( '&#xe608;')

         screenOnOff = ! screenOnOff

    }

})

// 全屏

function fullScreen() {

     var el = document. documentElement;

     var rfs = el. requestFullScreen || el. webkitRequestFullScreen || el. mozRequestFullScreen || el. msRequestFullscreen;

     if ( typeof rfs != "undefined" && rfs) {

         rfs. call( el);

    };

     return;

}

// 退出全屏

function exitScreen() {

     if ( document. exitFullscreen) {

         document. exitFullscreen();

    }

     else if ( document. mozCancelFullScreen) {

         document. mozCancelFullScreen();

    }

     else if ( document. webkitCancelFullScreen) {

         document. webkitCancelFullScreen();

    }

     else if ( document. msExitFullscreen) {

         document. msExitFullscreen();

    }

     if ( typeof cfs != "undefined" && cfs) {

         cfs. call( el);

    }

}