HTML5悬浮球源码,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);
}
HTML5悬浮球源码,js拖拽360桌面悬浮球代码相关推荐
- js拖拽360桌面悬浮球代码
js拖拽360桌面悬浮球代码 原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 演示地址 下载地址
- HTML中拖动消失的球代码,js拖拽360桌面悬浮球代码
原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果. 使用方法: 1.head引入css文件 * { margin: 0; padding: 0; list-sty ...
- 直播网站源码可拖拽悬浮球,仿Assistive Touch弹出窗口
悬浮球 android自带的FloatingActionButton没有拖拽功能,因此可以给它加上这个功能. 直接上代码: public class DragFloatActionButton ext ...
- 直播APP源码可拖拽悬浮球,仿Assistive Touch弹出窗口
悬浮球 android自带的FloatingActionButton没有拖拽功能,因此可以给它加上这个功能. 直接上代码: public class DragFloatActionButton ext ...
- html列表拖拽排序插件,JS拖拽排序插件Sortable.js用法实例分析
本文实例讲述了JS拖拽排序插件Sortable.js用法.分享给大家供大家参考,具体如下: 最近由于项目功能设计的原因,需要对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好 ...
- vue.js 拖拽排序_快速轻巧的Vue.js拖放可排序库
vue.js 拖拽排序 vue-smooth-dnd (vue-smooth-dnd) A fast and lightweight drag&drop, sortable library f ...
- 微信html5小游戏源码70种
2019独角兽企业重金招聘Python工程师标准>>> 微信html5小游戏源码70种 http://download.csdn.net/detail/csdddn/9419955游 ...
- js拖拽库——Sortable.js
Sortable.js是一款优秀的js拖拽库,支持ie9及以上版本ie浏览器和现代浏览器,也可以运行在移动触摸设备中.不依赖jQuery.支持 Meteor.AngularJS.React.Vue.K ...
- 基于layui.upload.js 拖拽文件/文件夹上传下载
layui.upload.js 拖拽文件/文件夹上传下载 前言 js代码 页面使用(我这里用的是uploader.jsp) CSS文件 上传效果 总结 前言 项目需求完成文件上传,可以拖拽上传文件/文 ...
最新文章
- pyqt5获取屏幕大小并将窗口大小设置为屏幕的百分之六十
- web开发常用的几种居中形式
- 主从多机matlab代码,Jenkins的Master Slave主从进行多机多环境部署-配置
- 编程之美 set 12 快速找出故障机器
- 世界杯千万级直播高稳定的挑战和实践
- android9.0原生字体,iOS 9原生字体看腻了?不如学着去替换吧
- python求最大值最小值_Python求可变参数的最大值最小值以及参数个数
- 网站发布(项目上线流程)
- tbase 之一 github setup
- Docker概述(一)(标贝科技)
- java8中的闭包Function/BiFunction
- python教程-马哥教育官网-专业Linux培训班,Python培训机构
- 喜什么颜什么的成语(喜什么颜什么四字成语大全)
- pwa 让你的网页可以像本地程序一样安装到电脑上,Youtube网站使用的也是当前方法 (chrome版本)
- 一周AI看点 | 北航设立全国首个人工智能专业,前IBM沃森首席科学家任京东副总裁
- APP运营推广那点事
- Echarts 修改X轴字体大小
- IDEA2020 安装教程,图文教程
- monkey稳定性测试
- python计算移动平均线_(转)简单移动平均线(Simple Moving Average,SMA) 定义及使用...
热门文章
- 【超分辨率】从SRCNN到EDSR,总结深度学习端到端超分辨率方法发展历程
- MRP(物料需求计划) 的运作机制
- R语言导入xlsx包错误: JAVA_HOME cannot be determined from the Registry
- Python pip下载的whl文件到哪里了?如何找到并使用这些whl文件?(whl离线安装包的制作过程示例)
- 你喝过LGG益生菌酸奶了吗?
- python+cuda编程(一)
- word中仿宋字体显示不清楚的问题
- 小学四则运算练习软件软件需求说明
- 以 回车键 为结束标志的输入
- Oracle查询连续几年,几月,几天的数据