给网站添加一个动态小人物，自动问候，并且会随机出现
小猫会随机出现在屏幕的任意位置，同时也会跟随鼠标转动
当然不一定得是小猫，只要你想设置什么都行，可以是小狗，可以是小兔子，也可以是一个卡通人物
加入需要的页面即可，代码：
<style>
#carrot {
position: fixed;
bottom: 20px;
left: 1px;
width: 100px;
height: 100px;
background-size: contain;
background-repeat: no-repeat;
cursor: pointer;
animation: shake 1s ease-in-out infinite;
background-image: url("img/0 (7).gif");
}
@keyframes shake {
0%!{(MISSING) transform: rotate(0deg); }
25%!{(MISSING) transform: rotate(5deg); }
50%!{(MISSING) transform: rotate(0deg); }
75%!{(MISSING) transform: rotate(-5deg); }
100%!{(MISSING) transform: rotate(0deg); }
}
#message {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #fff;
border: 1px solid #000;
padding: 10px;
display: none;
z-index: 999;
}
</style>
</head>
<body>
<div id="carrot"></div>
<div id="message"></div>
<script>
var carrot = document.getElementById("carrot");
var message = document.getElementById("message");
var messages = {
morning: "早上好！新的一天开始了！",
noon: "中午好！<?php echo $conf['sitename']?>愿你有个愉快的午后！",
afternoon: "下午好！<?php echo $conf['sitename']?>愿你过一个充实的下午！",
evening: "晚上好！忙碌一天了休息一下吧！",
night: "晚安！<?php echo $conf['sitename']?>愿你有个好梦！",
default: "你好！欢迎来到<?php echo $conf['sitename']?>"
};
var time = new Date().getHours();
if (time >= 6 && time < 9) {
message.innerHTML = messages.morning;
} else if (time >= 9 && time < 12) {
message.innerHTML = messages.noon;
} else if (time >= 13 && time < 18) {
message.innerHTML = messages.afternoon;
} else if (time >= 18 && time < 22) {
message.innerHTML = messages.evening;
} else if (time >= 22 || time < 6){
message.innerHTML = messages.night;
} else {
message.innerHTML = messages.default;
}
if (time >= 6 && time < 9) {
carrot.style.backgroundImage = "url('img/0 (6).gif')";
} else if (time >= 9 && time < 12) {
carrot.style.backgroundImage = "url('img/0 (7).gif')";
} else if (time >= 13 && time < 18) {
carrot.style.backgroundImage = "url('img/0 (2).gif')";
} else if (time >= 18 && time < 22) {
carrot.style.backgroundImage = "url('img/0 (4).gif')";
} else if (time >= 22 || time < 6){
carrot.style.backgroundImage = "url('img/0 (10).gif')";
} else {
carrot.style.backgroundImage = "url('img/0 (14).gif')";
}
var carrot = document.getElementById("carrot");
document.onmousemove = function (e) {
var x = e.clientX;
var y = e.clientY;
var catX = carrot.offsetLeft + carrot.offsetWidth / 2;
var catY = carrot.offsetTop + carrot.offsetHeight / 2;
var angle = Math.atan2(y - catY, x - catX) * 180 / Math.PI;
carrot.style.transform = "rotate(" + angle + "deg)";
};
setInterval(function () {
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
carrot.style.left = x + "px";
carrot.style.top = y + "px";
}, 2000);
carrot.addEventListener("click", function() {
message.style.display = "block";
setTimeout(function() {
message.style.display = "none";
}, 3000);
});
</script>
转载声明：本文为 给网站添加一个动态小人物，自动问候，并且会随机出现
发表评论：