HTML中拖动消失的球代码,js拖拽360桌面悬浮球代码

原生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模板，感谢支持！