科迅教育老师直接接听

400-029-09** 400-029-0997 转 23498
查看完整号码
扫码拨号
微信扫码拨号

【科迅干货】js拖拽到边缘悬浮球代码

内容介绍

今天来分享一款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拖拽到边缘悬浮球代码 </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('tp.png') no-repeat center center;

background-size: 100% 100%;

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>

</body>

</html>

这个效果和图片本身没有什么关系，所以什么图都可以实现。那么这期就到这里，下期再见。

添加微信咨询
黄老师 @南通科迅教育

获取课程资料+免费试听，体验强师课程！

微信号：ntk******88

立即咨询

“南通科迅教育”是南通科迅教育信息咨询有限公司在教育宝平台开设的店铺，若该店铺内信息涉嫌虚假或违法，请点击这里向教育宝反馈，我们将及时进行处理。

机构评分

环境：4.0师资：4.0服务：4.0效果：4.0

公示信息

店铺名称：南通科迅教育

单位名称：南通科迅教育信息咨询有限公司

账号名称：ntkxjy（136******78）

所属城市：江苏南通

入驻时长：18年

在线客服：在线聊

相关课程

微信咨询

返回顶部