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.117515.com-139彩票网网页| www.944684.com-一分彩是假的吗| www.908544.com-安徽快三综合走势| www.dt05.com-快彩走势图下载安装| www.444296.com-福彩3d绝杀和值| www.702308.com-三分快三信用彩票| www.871280.com-快三预测大小| www.988034.com-彩民乐与阳光探码图| www.jo31.com-彩票大咖微信号| www.103633.com-体彩官网各开奖结果| www.336506.com-博大彩票是不是真的| www.288359.com-彩狮时时彩专业计划| www.745178.com-一分钟大发快三神器| www.8725.wang-彩票双色球推荐号码| www.um54.com-3d彩宝网金胆| www.97605.com-二分时时彩规律| www.15ep.com-易彩乐是正规软件吗| www.655976.com-彩票赔钱经历| www.733084.com-南京体彩中心人员| www.826644.com-网上彩票又恢复了| www.935088.com-福彩三地新彩吧| 6678彩票www.2788cai.com| www.17571.cc-重庆时时彩套路法| www.366840.com-彩铅星空-| www.363.biz-福利彩票多少中奖| www.497516.com-辛运相伴辛运彩票| www.62xa.com-怎么做直属杏彩代理| www.412277.com-福彩复制票怎么打| www.883231.com-什么是快开彩票| www.6je.com-腾讯分分彩助赢分析| www.918011.com-江苏快三选号| www.da13.com-彩票ⅱ选5任3技巧| www.017551.com-彩票投资指南报今期| www.175202.com-安徽快三走势图牛| www.964362.com-广东体育彩票站点| www.vo66.com-江苏老快三走势图表| www.2030.org-中彩网首页擂台赛| www.62oh.com-彩票大数据网| www.947754.com-爱彩乐是不是假的| www.168990.com-吉林快三走势图下载| www.682712.com-彩票榜网页-| www.570666.com-网上购买福彩可靠吗| www.223438.com-今天江苏快三结果| www.663265.com-3g彩票中心-| www.747588.com-爱彩票app1-| www.813460.com-真人真事足彩博客| www.433933.com-精彩分享平台| www.093310.com-全部彩种免费计划表| www.217306.com-彩票中奖神器| www.331468.com-什么是七乐彩票| www.101556.com-彩票信誉平台推荐| www.rs05.com-六爻测彩票最准术| www.949510.com-时时彩后三杀号| www.rr72.com-七星彩结果-| www.71vj.com-恒彩彩票骗局| www.644889.com-118彩票安卓手机| www.798206.com-大彩鲸11选5| www.913695.com-国彩平台注册| www.100782.com-手机乐彩论坛网| www.224565.com-快三连号最大遗漏| www.331484.com-彩票趋势分析入门篇| www.rq78.com-下载快三宝典| www.65ot.com-开彩票站怎么提成| www.83538.com-买了彩票不敢看开奖| www.hq65.cc-飞鱼彩票技巧| www.85118.cc-手机彩票能兑奖吗| www.118614.com-时时彩微信报奖群| www.229529.com-网络彩票返点及倍率| www.397056.com-大连远洋竞彩视频| www.578315.com-澳门彩票首页| www.716756.com-唯美古风彩铅画| www.37635.cc-彩宝网老版本| www.000653.com-熊猫彩电-| www.364306.com-测彩高手双色球预测| www.075367.com-众彩网官方下载| www.520110.com-乐透彩票网-| www.we.com-手机购彩app下载| www.677741.com-各种彩票开奖查询| www.797470.com-浩博彩票平台| www.5528.me-暴风雨后的彩虹歌词| www.cp7575.com-彩吧-| www.155620.com-上海快三全天多少期| www.765620.com-中彩网平台-| www.852378.com-浙江福利彩票12| www.c54.top-百宝彩怎么玩| www.2025.org-彩票投注平台排行榜| www.152449.com-彩票126期-| www.237244.com-免费彩票大全| www.427292.com-哪里下载足彩软件| www.976570.com-洛阳宜阳结婚彩礼| www.pr96.com-体彩助手电脑版| www.053131.com-卖足彩料合法吗| www.586965.com-竞彩哪里买好点| www.95659.cc-体彩投注站如何收益| www.829753.com-福利彩票店转让风险| www.698076.com-极速时时彩计算公式| www.15268.com-嘉兴福彩地址在哪里| www.19282.com-中过竞彩网-| www.95119.cc-彩票布林线-| www.11sd.com-国家官方彩票有哪些| www.35ky.com-鑫彩网快3-| www.494909.com-浙江快乐彩票总汇| www.599593.com-彩票能一夜暴富吗| www.729776.com-新彩尊登录-| www.853238.com-金福彩票网是黑彩吗| www.967145.com-3d中奖彩票图片| www.21bd.com-高频彩数字规律技巧| www.393953.com-彩票开奖结果试机号| www.576060.com-分分钟快三怎么玩| www.044947.com-福彩3d专家买票| www.224022.com-幸运快三倍投计划表| www.312292.com-领先的彩票平台| www.395267.com-体彩去南京哪里领| www.333754.com-看彩啦3d今天预测| www.391809.com-境外网彩-| www.6582.wang-鑫彩网是合法的吗| www.336272.com-高频彩彩票平台| www.111315.com-生财有道图库彩图库| www.366013.com-水溶性彩铅画人物| 大赢家彩票平台www.735037.com| www.237805.com-双色球彩票选号软件| www.322190.com-福彩双色球分析| www.010267.com-新快三心得-| www.7707.vip-七乐彩牛材网| www.993701.com-竞彩单关历史数据| www.91679.com-500彩票助手| www.382625.com-买彩彩票-| www.560942.cc-安徽快三和值图表| www.280803.com-uu快三单双技巧| www.6599.wang-今日买彩票幸运数字| www.tt01.com-福体彩开奖结果| www.7st.cc-彩票实战手册内容| www.156026.com-好彩客app苹果版| www.2981.vip-凤凰5分彩-| www.ay07.com-百姓彩票网猜单双| www.057836.com-彩票规律研究软件| www.122406.com-微信代买彩票| www.286732.com-500彩票有挂么| www.356860.com-彩票立即开奖| www.0284.cc-凤凰彩票计划网页版| www.122945.com-寻找彩票团队| www.4397.me-甘肃省快三下载| www.272582.com-今日新鲜事彩票查询| www.335889.com-快三什么时候结束| www.90.cn-大地彩票提现失败| www.052883.com-抚州市彩票管理中心| www.334163.com-三亚彩票私彩| www.278172.com-中彩网双色球手机版| www.357358.com-彩票六等奖怎么兑奖| www.461463.com-图吧彩报-| www.535018.com-电玩城彩票机调试| www.902946.com-彩票平台程序怎样做| www.81hm.com-福彩快乐十分新规则| www.836922.com-江苏彩礼一般给多少| www.901888.com-公益福彩pk拾| www.955925.com-正规彩票平台排行榜| 中国福利彩票www.33588r.com| www.dl06.com-彩票群英会玩法介绍| www.116.cm-什么什么重彩成语| www.2805.com-彩针糖-| www.39ji.com-快三时间差-| www.701665.com-手机彩票为什么停止| www.nt05.com-彩票兑奖-| www.877068.com-下载彩报和彩迷图|