欢迎来到 IT实训基地 - 科迅教育
咨询电话:400-836-0509
首页
科迅动态
就业真相
视频教程
项目实战
学员专访
技术交流
当前位置:
首页
技术交流
【科迅干货】js拖拽到边缘悬浮球代码
【科迅干货】js拖拽到边缘悬浮球代码
浏览量:458
时间:2019/5/17
类别:技术交流

今天来分享一款js拖拽到边缘悬浮球代码,仿360加速球的,下面来放图:

S5DC9XY@IOG`_6}V1PZZ`XC.png

2.png

下面我们来看代码:

<!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>

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


77
南京校区:南京市建邺区新城科技园广聚路33号安科大厦4楼
18724002960
南通校区:南通市崇川区人民中路23号新亚大厦3楼
13626271253
上海校区:筹建中...
敬请期待
全国咨询电话
400-836-0509
周一至周日   08:30-21:30
关注免费学习
苏ICP备15009282号     科迅教育     法律顾问:江苏瑞慈律师事务所     Copyright 2008 -
领取学习视频资料
限前100名
您好,您想咨询哪门课程呢?