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模板,感谢支持!
HTML中拖动消失的球代码,js拖拽360桌面悬浮球代码相关推荐
- js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码 原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址 下载地址
- HTML5悬浮球源码,js拖拽360桌面悬浮球代码
使用方法: 1.head引入css文件 * { margin: 0; padding: 0; list-style: none; } html, body { width: 100%; height: ...
- vue 鼠标拖动画矩形_vue中拖动元素效果实现,以及拖拽`缩放后的元素`效果实现...
START 番茄我又又又来写点啥了,最近被需求折磨的不要不要的,要做一个在线PPT做的网站.元素拖动算是其中一小部分的功能吧,但是还是出了很多的bug,这篇文章算是我对元素拖拽相关的记录吧. 仅以此文 ...
- Electron桌面悬浮球工具,支持拖动及配置,提供了待办事项、快速笔记等功能。
HiLoop HiLoop是一个简约的桌面悬浮球工具,支持拖动及配置,提供了待办事项.快速笔记等功能.忙里偷闲体验一下用前端的方式开发桌面端应用,学习的同时做一些有意思的小东西. 叫HiLoop的原因 ...
- js拖拽之二:实现拖动元素上下左右改变元素大小
具体原理参考 js拖拽一 <script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = ...
- sortable 拖拽时互换目标的位置_双端通用型JS拖拽插件的封装与应用
最近工作中遇到一个需求,需要将一个元素从某位置拖动到另一固定位置后执行某一交互行为,具体效果如下: 这个看似简单的需求,然而实现起来却并不那么顺利.我首先想到的是如何通过哪个现有的插件来快速解决这个问 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- html 右侧滚动条,html中去掉textarea右侧滚动条和右下角拖拽
摘要 腾兴网为您分享:html中去掉textarea右侧滚动条和右下角拖拽,湘税社保,唯品会,上海交通,钱大掌柜等软件知识,以及玫瑰小镇魔法花园,raw格式转换软件,阳光天天购,live壁纸,废品机械 ...
- php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
最新文章
- 阿里巴巴达摩院ICLR 2020论文:从群体动态中认知个体
- Java大厂技术文档:Redis+Nginx+设计模式+Spring全家桶+Dubbo精选
- word2vec 中的数学原理具体解释(四)基于 Hierarchical Softmax 的模型
- 深度聚焦 3 大技术领域,阿里云将重磅亮相首届线上 KubeCon
- 原型模式和C++的拷贝构造函数有什么区别
- python代码编辑教程_python教程:pycharm编写代码的方式教学
- Optisystem中器件的学习(1-Visualizer Library、Sensors)
- 网站搜索引擎优化外链工具
- 古风排版 python
- Android-手撸抖音“潜艇大挑战”,非科班面试之旅
- 2018年海峡两岸光电展将在台北举办
- C语言——整数直角三角形
- 在智慧城市建设中 计算机模拟是一个强大的工具
- 如何在前台输出代码<xmp>,标签,并且是内容自动换行
- 实用分析工具推荐 | OmicsView:交互式可视化分析多组学数据
- php atlas,使用Atlas实现读写分离
- marvell raid linux,MARVELL RAID管理软件操作演示
- 解决mysql远程连接等待时间长的问题
- ReactiveX 操作符
- 安卓apk逆向之雷霆解锁VIP会员超详细教程