html內容
<body onmouseover="onSecondDelay(callback);"
onmousemove="onSecondDelay(callback);"
onmouseout ="clearTimeout(timer);">
<!--全屏-->
<div id="screenBox">
<i class="icon iconfont allScreen cursor"></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('')
screenOnOff = !screenOnOff
} else {
fullScreen()
$('.allScreen').html('')
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);
}
}