原生js制作简单好用的360桌面悬浮球，可拖拽到浏览器边缘，自动贴边，自动适应屏幕效果。
使用方法：
1、head引入css文件
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
#neko {
width: 100px;
height: 100px;
background: #ddd;
position: fixed;
cursor: move;
box-sizing: border-box;
border: 4px solid #66cc66;
border-radius: 50%;
background: url('tp.png') no-repeat center center;
background-size: 100% 100%;
overflow: hidden;
}
2、body引入HTML代码
var neko = document.querySelector('#neko');
var nekoW = neko.offsetWidth;
var nekoH = neko.offsetHeight;
var cuntW = 0;
var cuntH = 0;
neko.style.left = parseInt(Math.random() * (document.body.offsetWidth - nekoW)) + 'px';
neko.style.top = parseInt(Math.random() * (document.body.offsetHeight - nekoH)) + 'px';
function move(obj, w, h) {
if (obj.direction === 'left') {
obj.style.left = 0 - w + 'px';
} else if (obj.direction === 'right') {
obj.style.left = document.body.offsetWidth - nekoW + w + 'px';
}
if (obj.direction === 'top') {
obj.style.top = 0 - h + 'px';
} else if (obj.direction === 'bottom') {
obj.style.top = document.body.offsetHeight - nekoH + h + 'px';
}
}
function rate(obj, a) {
// console.log(a);
obj.style.transform = ' rotate(' + a + ')'
}
function action(obj) {
var dir = obj.direction;
switch (dir) {
case 'left':
rate(obj, '90deg');
break;
case 'right':
rate(obj, '-90deg');
break;
case 'top':
rate(obj, '-180deg');
break;
default:
rate(obj, '-0');
break;
}
}
neko.onmousedown = function (e) {
var nekoL = e.clientX - neko.offsetLeft;
var nekoT = e.clientY - neko.offsetTop;
document.onmousemove = function (e) {
cuntW = 0;
cuntH = 0;
neko.direction = '';
neko.style.transition = '';
neko.style.left = (e.clientX - nekoL) + 'px';
neko.style.top = (e.clientY - nekoT) + 'px';
if (e.clientX - nekoL < 5) {
neko.direction = 'left';
}
if (e.clientY - nekoT < 5) {
neko.direction = 'top';
}
if (e.clientX - nekoL > document.body.offsetWidth - nekoW - 5) {
neko.direction = 'right';
}
if (e.clientY - nekoT > document.body.offsetHeight - nekoH - 5) {
neko.direction = 'bottom';
}
move(neko, 0, 0);
}
}
neko.onmouseover = function () {
move(this, 0, 0);
rate(this, 0)
}
neko.onmouseout = function () {
move(this, nekoW / 2, nekoH / 2);
action(this);
}
neko.onmouseup = function () {
document.onmousemove = null;
this.style.transition = '.5s';
move(this, nekoW / 2, nekoH / 2);
action(this);
}
window.onresize = function () {
var bodyH = document.body.offsetHeight;
var nekoT = neko.offsetTop;
var bodyW = document.body.offsetWidth;
var nekoL = neko.offsetLeft;
if (nekoT + nekoH > bodyH) {
neko.style.top = bodyH - nekoH + 'px';
cuntH++;
}
if (bodyH > nekoT && cuntH > 0) {
neko.style.top = bodyH - nekoH + 'px';
}
if (nekoL + nekoW > bodyW) {
neko.style.left = bodyW - nekoW + 'px';
cuntW++;
}
if (bodyW > nekoL && cuntW > 0) {
neko.style.left = bodyW - nekoW + 'px';
}
move(neko, nekoW / 2, nekoH / 2);
}
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
