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.77748.com-体彩机器故障| www.820074.com-彩礼新政策-| www.995906.com-体彩竞彩加奖| www.vk88.cc-新手买彩票教程| www.750.live-时时彩总和大小推测| 彩票大家乐www.21202x.com| www.365908.cc-彩乐乐彩票介绍| www.523725.com-时时彩后二预测软件| www.618259.com-幸运中福彩版本4| www.696466.com-新强时时彩走势图| www.776715.com-彩八万软件下载| www.873226.cc-76时时彩彩票官方| www.941381.com-足球彩票胜平负规则| www.994721.cc-体彩十一选五任三| www.ap84.com-贵州省福利彩票兑奖| www.uw33.com-有没有玩快三赢钱的| www.25fv.com-全天重庆彩火山计划| www.643.date-圣地彩投注网| www.4401.cn-下载竞彩足球官方网| www.19622.com-网上买私彩多少犯法| 大赢家彩票www.599091.com| www.ya33.com-彩票号码25怎么买| www.70wm.com-时时彩计划抢眼团队| www.6376.org-足球胜负彩下载| www.43266.cc-鸿运快三彩票| www.011557.com-周六那些彩票开奖| www.095600.com-吉林体彩网11| www.169962.com-苏州快三开奖结果| www.255967.com-玩时时彩输了好惨| www.335840.com-私彩平台快三| www.414488.com-彩98app网站| www.869725.com-嘉兴福彩官方网站| www.493177.com-竞彩看盘思路| www.95th.com-快开彩票稳中| www.7077.top-七彩阳光信息| www.51596.com-时时彩k线图手机版| www.026823.com-代打彩票-| www.163238.com-巨彩网app-| www.261587.com-广西体彩中心| www.899895.com-彩票下app-| www.970755.com-彩票能中五百万吗| www.cai1024.com河南快三开奖| www.mo31.com-福彩网快三大小单双| www.175913.com-安徽省快三跨度| www.948113.cc-福利彩票的中奖规则| www.i02.cn-七乐彩彩票中奖概率| www.5305.org-分分彩有公式吗| www.009260.com-福彩领奖时间是几点| www.123390.com-乐彩论谈-| www.272838.com-福彩基金用途范围| www.536255.com-哪个彩票好中奖| www.669557.com-海南私彩今天结果| www.959862.com-做兼职被骗玩彩票| www.mb10.com-今天快三推荐豹子| www.1464.xyz-彩铅画古风美人| www.55830.com-七星彩开奖号码往期| www.136448.com-极速一分钟一开彩票| www.335113.com-福彩三d玩法介绍| www.545190.com-香港5分彩顶呱古| www.874483.com-老谢说彩19026| www.965504.com-百盈时时彩神计划| www.a18.me-新浪爱彩可靠吗| www.0415.vip-上海快三走势网二| www.69117.cc-快三注册流程及费用| www.251271.com-今日中彩有什么奥妙| www.529711.com-彩票延时开奖| www.804165.com-竞彩比分技巧| www.8qc.cc-彩票盈利团队| www.19113.com-网易彩票不给兑奖| www.068714.com-福彩网站是啥| www.229736.com-买大发快三违法| www.409711.com-够力七星彩安卓下载| www.539888.cc-各大彩票期望值| www.627186.com-罗彩的个人资料| www.731082.com-福彩网邀请码从哪弄| www.831513.com-公司过年发彩票| www.930653.com-10万彩票要交税吗| www.uu8.cc-玩乐彩犯法吗| www.7up.com-江苏福彩十二选五| www.87xg.com-500cc彩票下载| www.377687.com-彩虹5无人机图片| www.539736.com-大地彩票安卓版| www.675728.com-体彩开奖彩票开奖| www.wl50.com-好彩票网-| www.154786.com-足彩任九奖金最高| www.671739.com-双色球走势彩宝网| www.529866.com-北京彩票销售员招聘| www.298837.com-豪彩下载-| www.0777.biz-足球彩票用软件| www.55999.cc-彩票开奖查询彩规则| www.350209.com-九万彩票害死人| www.543522.com-福彩3d图库预测| www.783323.com-海南七星彩开奖日期| www.087222.com-七乐彩胆拖中奖图片| www.68ac.com-酷彩吧苹果下载| www.ly59.com-好彩网妹子骗局| www.266814.com-体彩排三走势图| www.353157.com-旺彩科学预测软件| www.500399.com-2千万彩票弃领作废| www.593570.com-鞍山七彩化学面试| www.688084.com-竞彩网计算器比赛| www.788389.com-五分彩可以预测吗| www.918868.com-外围彩票平台| 中彩网www.71233r.com| www.mj68.com-福彩3d图谜第二版| www.377167.com-体彩有关的对联| www.040904.com-河北十一选五派彩网| www.408124.com-体彩春节休市| www.582737.com-彩票让你倾家荡产| www.759264.com-三d彩票开奖今天| www.767547.com-彩票软件网站哪个好| www.890135.com-黑客破解时时彩软件| www.49252.com-掌上娱乐app彩票| www.7810.org-足彩14场中奖技巧| www.53752.com-澳洲时时彩官方网| www.188704.com-一分快三如何屠龙| www.370038.com-132彩票在线| www.532570.com-七星彩怎么算是中奖| www.629716.com-7彩app下载-| www.309166.com-骗买彩票充值| www.177995.com-广西快三爱彩乐| www.847629.com-pc蛋蛋是什么彩| www.ix63.com-2019年彩票休市| www.81472.com-线上博彩-| www.337753.com-重庆市时时彩走势图| www.934761.com-手机快彩-| www.61xu.com-注册即送18元彩金| www.735395.com-吉祥彩票把我删了| www.582135.com-鸿运彩彩票网| www.618787.com-深圳足彩分析师招聘| www.501857.com-开彩传媒原始股| www.572038.com-竞彩倍投最稳的买法| www.944686.com-彩票容错专家破解版| www.0935.wang-顺发彩票app| www.215449.com-玩彩-| www.377488.com-因为彩礼钱而分手| www.543004.com-3d福彩图库90期| www.652949.com-澳门博彩官官方下载| www.td99.com-时时彩a盘b盘| www.152970.com-肥强竞彩12课堂| www.230262.com-幸运彩票正规吗| www.91788.com-足彩大赢家缩水软件| www.204002.com-福彩三个号中奖吗| www.241311.com-彩库寶典-| www.tg80.com-福建快三时时彩网| www.915962.com-私彩会跟官网联网吗| www.991867.com-时时彩定胆位方法| www.mr68.com-中彩手彩票可靠吗| www.e09.pw-竞彩大奖记录| www.801044.com-彩票今日姓名运势| www.957694.com-彩票号444-| www.hq42.com-上海快三技巧大全| www.94bo.cc-易彩云彩票下载安装| www.095067.com-网上买3d彩票| www.61021.com-彩票什么是屠龙| www.12zi.com-好彩纪念版铁盒| www.548668.com-亿彩官方-| www.31887.cc-易彩快3官网下载| www.190201.com-广西快三推荐号码| www.583175.com-彩色简笔画大全| www.ai05.com-七星彩晚上几点开奖| 500彩票www.701549.com| www.413342.com-彩色沥青价格是多少| www.560522.com-kk彩票网下载|