纯js的桌面悬浮球，拖拽到浏览器边缘会自动贴边_表格弹出层_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

纯js的桌面悬浮球，拖拽到浏览器边缘会自动贴边

来源：我爱模板网作者：大小：大小： 0KB 点击次数：发布时间：2020-05-09 10:21:12 去下载去预览

特效介绍

这是一款纯js仿360桌面悬浮球，拖拽到浏览器边缘会自动贴边。四条边都能贴合。可以配合弹出层做出点击显示菜单等功能。放在个人网站上做个快捷操作也是不错的。

使用方法

直接运行下面的代码即可查看效果，就不提供下载了：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>纯js的桌面悬浮球，拖拽到浏览器边缘会自动贴边 - 我爱模板网 www.5imoban.net</title> <style> * { 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('http://www.5imoban.net/view/demoimg/1.jpg') no-repeat center/cover; overflow: hidden; } </style> </head> <body> <h3 style="padding: 20px">请将图片拖动到浏览器边缘，查看效果</h3> <div id="neko"></div> <script> 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); } </script> </div> </body> </html>
提示：您可以先修改部分代码再运行