QQ客服
当前位置 : 首页 > 代码 > 网页特效 > 提示框/浮动层/弹出层 > js拖拽360桌面悬浮球代码

js拖拽360桌面悬浮球代码

原生js制作简单好用的360桌面悬浮球,可拖拽到浏览器边缘,自动贴边,自动适应屏幕效果。
分享到微信朋友圈
X

使用方法:

1、head引入css文件

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

2、body引入HTML代码

<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>
[声明]本站素材来自用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服QQ:2447402004给予处理。
举报×
举报原因:

相关代码

二维码
意见反馈
×
×

注册

QQ注册 立即下载 新浪注册 立即下载

签到成功!

已连续签到1天,签到3天将获得积分VIP1天

知道了
七乐彩票 www.63618.com-唯彩看球cba直播| www.711334.com-黑彩票平台提现冻结| www.817956.com-彩票晚上几点停售| 500彩票www.26299w.com| www.53534.com-丰和彩票-| www.109113.com-彩蚕在哪买-| www.82603.com-足彩19024对阵| www.75lt.com-古建彩绘吧-| www.2037.vip-二四六好彩图片玄机| www.9107.cn-黑客彩美-| www.720373.com-七星彩单双技巧| www.841803.com-烟台福彩书法| www.996600.com-黑龙江省福彩| www.120556.cc-区块链彩票综艺股份| www.230728.com-彩运8-| www.98977.cc-时时彩顺子玩法| www.422433.cc-开个彩票店要多少钱| www.520241.com-中国乐彩网-| www.940773.com-众彩网彩票专家| www.cp8698.com-人人彩票网-| www.699037.com-玩吉林快三被黑了| www.59711.com-中堂彩网站大全| www.494757.com-老郑足彩微博| www.4321.vip-五分彩好买吗| www.1310.top-福彩吧论坛-| www.12603.com-3d体彩吧-| www.177963.com-北京彩票开奖| www.3355.tv-在哪里看彩票走势图| www.452567.com-com.彩78-| www.283830.com-广东福彩开奖公告| www.206108.com-五分彩是骗局吗| www.010.la-彩票系统出租搭建| www.3773.cm-彩吧vip平台平台| www.061222.com-鼎丰彩票骗局| www.176050.com-快三倍投盈利表图片| www.781542.com-优游彩票怎么样| www.246857.com-五百万彩票网完整版| www.321075.com-福建体彩开奖时间| www.591643.com-海南开放博彩| www.268593.com-玩快三输了怎么办| www.292811.com-贵州福利彩票电话| www.400629.com-澳客足彩网电脑板| www.540006.com-玩彩app下载| www.73206.com-福彩开奖解果| www.049565.com-江苏体育彩票排列五| www.136793.com-彩票站怎么加盟| www.775233.com-49c彩票网网址| www.868980.com-19年040七星彩| www.981834.com-尊彩网下载-| www.kp52.com-江苏福利彩票双色球| www.948092.com-微信快乐彩是假的吗| 500彩票www.50026s.com| www.651000.com-云南彩辫-| www.746844.com-购彩兼职是真的吗| www.819357.com-河南彩票兑奖地点| www.890688.com-50倍率彩票-| www.952940.com-中国竞彩网足球| 世彩堂www.5854m.cc| www.dk11.com-福建体彩7星彩规则| www.zx09.com-牛牛彩票怎么回事| www.27nl.com-彩票这么难中奖啊| www.6434.com-彩票平台话术| www.17234.com-彩票通ios-| www.974146.com-幸运五星彩开奖软件| www.th9.com-青海快三走势图软件| www.26761.cc-七星彩票兑奖说明| www.98786.com-足彩串关表投注表| www.080480.com-百度乐和彩走势图| www.992433.com-竞猜资讯竞彩网| www.587031.com-重庆彩3中2概率| www.647099.com-江苏快三遗漏360| www.899042.com-福彩3d网上怎么买| www.969863.cc-福彩3d秘密通道2| www.pf10.com-吉林快三25期预测| www.56128.cc-皇家彩世界官方网站| www.197013.com-马来三分彩官方开奖| www.294763.com-体彩排列三断组| www.25tm.com-盈盈彩票网址| www.25824.com-体育彩票直播开奖| www.963539.com-足彩胜平负概率计算| www.cp5218.com-青海快三开奖| www.57612.cc-彩八仙手机版登录| www.765877.com-快三体彩屋-| www.088949.com-吉林快三稳定盘| www.860754.com-伯乐彩票平台网址| www.955991.com-全部彩票开奖查询| TT彩票www.633813.com| www.tx46.cc-快三投注员头像| www.86rg.com-四川福彩招聘岗位| www.717680.com-合肥体彩兑奖流程| www.830147.com-盈彩网注册-| www.894793.com-七星彩查询中奖查询| www.994715.com-好彩客所有版本| www.ls62.com-体彩打票员怎么对账| www.148789.com-汇彩网登录主页| www.044383.com-广东体育彩票11| www.454452.com-苹果酷彩吧下载| www.wz83.com-湖北新快三软件下载| www.81jv.com-武汉彩票作弊案| www.4762.xyz-彩票站开业送什么好| www.31833.com-重庆彩-| www.58ki.com-701彩票网-| www.3065.com-七星彩2284期测| www.8418.loan-中彩票恶搞生成器| www.650920.com-荷花水彩教程| www.751232.com-11选五彩票预测| www.812424.com-彩吧彩票买大小| www.747970.com-彩乐爆官网-| www.840028.com-pc蛋蛋彩开奖| www.900952.com-体彩排三开机号今天| www.958809.com-彩票好久开-| 彩宝www.cb2388.com| www.327909.com-河南快三yvce| www.950636.com-彩票交流群论坛| 金冠彩票www.49956w.com| www.cp215.com-彩票自动分析软件| www.wd96.com-兰州体彩中心在哪里| www.22hz.com-高频福彩pc-| www.3807.cm-开心彩票网交流区| www.229735.com-大发时时彩合法吗| www.64lx.com-众购彩票下载安装| www.1637.top-老时时彩630| www.7472.vip-黑龙江体育彩票电话| www.53792.cc-南国彩票梦册| www.99427.com-时时彩任二技巧集锦| www.91875.cc-中国福利彩票领奖处| www.905372.com-网络足彩-| www.964675.com-竞彩002直播| www.cp108.com-快三怎样看走势图| www.jd93.com-彩票双色球随机选号| www.123793.com-中国体育彩票任选九| www.449721.com-福彩积分兑换商城| www.715588.com-重庆实时彩玩法| www.231851.com-玩快三心得体会| www.958692.com-福彩机过户-| 百姓彩票www.bxcp3.com| www.507796.com-上期彩票开奖号码| www.452320.com-7070彩票网站| www.330493.com-福彩快三号码预测| www.943000.com-陕西省体彩兑奖中心| www.bo47.com-cba彩票-| www.wa24.com-七星彩今晚开奖查询| www.36wa.com-彩票010-| www.0808.live-彩票平台刷流水单| www.057718.com-彩票3d怪字-| www.vi90.com-内蒙古快三看样结果| www.28fp.com-彩票快乐三分钟| www.993.la-全民彩票时时彩| www.075635.com-快彩3计划-| www.895623.com-推荐的彩票合买系统| www.957614.com-历年清明节七星彩| 华彩www.71399t.com| www.035778.com-有完没完没看懂彩票| www.771006.com-快三和值概率| www.895183.com-体彩网提现-| www.956319.com-七星彩和排列五开奖| 500彩票www.50024j.com| www.655871.com-北京彩票店个人转让| www.2540.com-福彩之家-| www.25902.com-七色彩虹寓意| www.77786.com-网络非凡彩票骗局| www.038789.com-彩票试机号今天全国| www.162781.com-福彩杀码号-| www.256034.com-多中彩彩票-|