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天

知道了
亚洲28 www.6083.vip-彩票看盘系统软件| www.35568.com-久久彩票客户端| www.371428.com-牛彩赚钱真的假的| www.318042.com-福彩开奖直播号| www.970637.com-迷彩兔之家-| www.904433.com-彩神iv正规吗| www.920718.com-彩神8彩票网站| www.583500.com-日本全彩本子| www.666077.com-乐彩国际理财可靠吗| www.755269.com-河南幸运彩手机网址| www.272095.com-牛博彩票-| www.365240.com-什么彩票app最好| www.505375.com-彩队长彩票网| www.576315.com-彩02彩票客户端| www.660413.com-腾讯有彩票软件吗| www.746233.com-国家购彩平台登录| www.827654.com-世纪佳缘骗你买福彩| www.83ya.com-福彩3d字迷专区| www.4013.cn-彩票app澳门永利| www.08183.com-陕西福利彩票| www.74258.com-彩虹旗论坛进不去| www.713190.com-海南体彩飞鱼规则| www.839119.com-彩票投注下期推荐号| 百姓彩票www.bxcp3.com| www.921527.com-彩神网络彩票| www.751654.com-足彩胜负彩2场玩法| www.858286.com-乐购彩票好不好用| www.h23.xyz-七星彩安然专家预测| www.105579.com-彩八彩票幸运28| www.034355.com-cba竞彩在哪里买| www.204436.com-福彩30选5玩法| www.k12.in-3d牛彩网-| www.407837.com-万人彩app下载| www.871.in-时时彩五星提取四星| www.6736.biz-幸运彩票怎么玩| www.9162.xyz-我需要乐彩网| www.059368.com-体彩五大联赛| www.958447.com-福利彩票公式计算除| www.949598.com-快彩推号专家| 99福彩www.761996.com| www.6116.vip-如何购买国外的彩票| www.64937.com-网易红彩专家靠谱吗| www.657045.com-彩票二维码可以干嘛| 99福彩www.316686.com| www.uh47.com-彩票是真的能中奖| www.188464.com-合买彩票安卓版| www.48ta.com-广西高频彩在线计划| www.fk87.com-时时时彩专家计划| www.xr81.com-甘肃快3开奖彩彩| www.43ny.com-表现出彩是什么意思| www.473.cm-快三限号销售| www.26200.com-周杰伦彩虹现场版| www.590731.com-内蒙快三遗漏查询表| www.690736.com-大彩鲸快乐12| www.841031.com-彩妆店加盟要多少钱| www.925114.com-1彩平台-| www.998225.com-广州体彩投注站| www.no36.com-青海福彩兑奖地址| www.12rq.com-幸运五星彩开奖网址| www.711.com-足彩即时比分澳客| www.6823.biz-解彩神通字谜| www.7567.top-福彩蛋蛋有危险吗| www.30745.com-福利彩票查询中奖| www.819633.com-中彩票捐钱-| www.8694.vip-写博彩源码违法么| www.62443.com-体彩超纱大乐透开奖| www.050847.com-买福彩快三如何赚钱| www.152896.com-旺彩社区是什么| www.237374.com-华夏彩票安全吗| www.338034.com-中国福利彩票022| www.432300.cc-体育彩票多钱一张| www.524353.com-辽宁11选5爱乐彩| www.686070.com-彩票限号一般会开吗| www.783036.com-保定体彩吧-| www.871563.com-福利彩票快乐彩玩法| www.957860.com-一分钟彩票-| www.cp2560.com-江苏快三大小规则| www.l00.xyz-福建快三实时走势图| www.79mf.com-以往彩票开奖查询| www.583939.com-新版彩经网首页| www.676213.com-中国体育彩票彩报| www.8130.loan-福彩星期几开奖时间| www.30363.com-好彩票有幸运28| www.78992.com-巨彩51中奖-| www.060690.com-红宇体彩店怎么样| www.654113.com-有高仿彩票打印机| www.731234.cc-王牌彩票网址| www.829038.com-神彩1下载到手机| www.899578.com-体彩19033-| www.968218.com-河北省福彩快三玩法| www.fs03.com-北京极速快三官网| www.yp95.com-在韩国中彩票| www.78137.com-买福利彩票靠谱吗| www.18jz.com-买彩票如何选号| www.693705.com-广州市体育彩票兑奖| www.874121.com-大彩最新开彩成绩| www.ga9.com-体彩七星彩中奖规则| www.zc80.com-体彩实体店网上购买| www.99sa.com-双色球彩票历史| www.4040.cn-中国博彩牌照| www.407567.com-彩票密码线图片| www.5167.com-中国福利彩票七乐| www.884433.com-中国彩吧遗漏| www.864086.com-九亿彩票软件| www.959753.com-世纪佳缘彩票骗局| www.95188.com-60彩票安全吗| www.311481.com-福彩3d四码等于1| www.9639.wang-凤彩网排列五专家| www.530994.com-爱淘彩票官方网站| www.456633.com-足彩代理狗-| www.239356.com-一分钟快三人为控制| www.6987.in-七星彩网易直播| www.699983.com-足球竞彩比分预测| www.898174.com-彩票充值假聊接单| www.kz90.com-什么是28彩票| www.583957.com-乐透乐彩票网| www.108482.com-今天七星彩中奖号码| www.2271.in-青海体彩中奖情况| www.7839.cm-体彩职业彩民| www.28id.com-四季彩票官网下载| www.575617.com-中国竞彩报-| www.877586.com-五行彩票公式| www.186977.com-江苏快三中奖奖金| www.254518.com-好彩是什么软件| www.375692.com-中国福利彩票是什么| www.574462.com-电信彩铃官网| www.671462.com-彩九平台下载| www.776369.com-时时彩前三杀一码| www.914419.com-彩票166登陆| 大赢家彩票www.599843.com| www.386336.com-3d开奖彩吧助手| www.726525.com-香港彩宝典app| www.799970.com-体育彩票领奖流程| www.906809.com-怎么申请福利彩票店| www.634689.com-七彩建盏有毒吗| www.714012.com-彩票33下载633| www.797335.com-彩票怎么登录| www.896083.com-福利彩票有哪些奖| www.958111.cc-彩票站改革-| www.lm8.com-快三技巧稳赚法| www.xh72.com-彩虹10-| www.57mu.com-玩彩犯法吗-| www.287585.com-华夏彩票登录| www.364018.com-福彩藏机布衣图| www.442179.com-彩票中奖号排三| www.642833.com-福彩超级3d助手| www.740530.com-澳门彩票macau| www.813600.com-福彩今日报纸内容| www.893425.com-新快三走势怎么看| www.966831.com-宝马彩票网注册网址| www.uz6.cc-马来三分彩官方开奖| www.c12.me-购彩大厅密聊总代理| www.50iv.com-职业彩民的生活| www.215256.com-江苏快三预测网| www.465946.com-兴华彩票app下载| www.613224.com-免费的彩票程序开发| www.18269.com-五分彩是不是正规的| www.57005.cc-宜春体彩中心地址| www.041300.com-36o彩票购彩大厅| www.298939.com-甘肃快三最大遗漏| www.362864.com-彩虹羽泉歌词解析| www.458789.com-海南网上怎么买彩票| www.528847.com-体彩店面设计图| www.590599.com-胜负彩9场中奖规则|