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.942313.com-刚力彩芽图片| www.68914.com-安徽福彩排列3| www.444612.com-顺盈彩票是真的吗| www.104065.com-红好彩和蓝好彩| www.299.me-买彩票赔钱了怎么办| www.6338.bid-摇发彩票听过吗| www.30985.com-彩神2邀请码| www.78527.com-高频彩预测网| www.38212.cc-彩票售卖机-| www.879887.com-大发彩票的骗局| www.1160.tv-福彩3d名词解释| www.b71.shop-新余体育彩票网址| www.26929.com-网上的天天乐彩票| www.217456.com-快三公式预算法| www.905752.com-竞彩足球赛程赛果| 818合彩www.288hc.com| www.299030.com-彩票开奖查询公告丨| www.865422.com-澳客足彩网-| www.129764.com-彩73平台正规吗| www.77080.cc-京彩集团下载| www.081402.com-足彩大神跟单app| www.227102.com-江苏彩票巨奖骗局| www.333125.com-体彩最新开奖号码| www.139878.com-广东省福彩兑奖流程| www.368168.com-彩铅画樱桃图片| www.379114.com-永彩彩票是真的吗| www.506710.com-福彩机图-| www.60428.cc-彩票走势分析方法| www.8829.vip-170彩票网图谜| www.188628.com-快乐彩22-| www.9953.top-足彩预测彩票| www.9884.vip-36o足球彩票| www.rs16.com-双色球牛彩网| www.28gc.com-久盈彩票-| www.758627.com-彩薇花化妆品价格表| www.566688.com-彩神通软件怎么样| www.653220.com-安徽快三几点开始| www.640094.com-奥克足球竞彩网| www.29jr.com-搜福彩票开奖结果| www.556116.com-黑彩平台排行| www.925495.com-旭彩快三的规律| www.994999.cc-北京快三哪里看开奖| www.aa35.com-体彩开奖直播现场| www.4690.cm-彩票可以连打几期| www.72406.com-快三彩票大小单双| www.1fs.cc-超神时时彩在线计划| www.523524.com-时时彩开奖结96果| www.062815.com-现在哪里可以买彩票| www.010558.com-凤凰私彩平台| www.520024.com-休闲快三视频| www.379028.com-秦皇岛体彩-| www.166028.com-恒彩苹果手机客户端| www.272396.com-网易彩票靠谱么| www.1064.net-中国体育彩票平台| www.8733.org-体彩摇奖中断| www.66526.cc-福利彩票单式和复式| www.087901.com-58彩票老版本| www.181608.com-湖北快三预测图| www.997783.com-排三走势乐彩网| www.88078.com-中国彩正规吗| www.989255.com-福直3d彩吧助手| www.38qp.cc-山东体彩三亿| www.88zx.cc-日彩网是啥-| www.348968.com-彩票网站制作教程| www.456300.com-红菜苔彩票客服| www.544835.com-时时彩杀号工具在线| www.306637.com-澳发彩-| www.035997.com-恭喜彩票中奖的句子| www.359578.com-苹果下不了约彩| www.467902.com-彩票遗漏标数量讲解| www.579550.com-5050彩票太假了| www.678876.com-欧冠足彩赔率| www.775257.com-全民快三会不会骗钱| www.954467.com-浙江体彩网彩票| 乐彩网www.756586.com| www.ft59.com-甘肃福彩快3遗漏号| www.86644.com-信彩平台登录| www.368070.com-福彩3d晚秋合值谜| www.061183.com-微信美女时时彩骗局| www.813452.com-宁夏体彩中心官网| www.8946.vip-全民手游彩票| www.50975.com-好运彩app安全吗| www.474801.com-百盛彩-| www.23227.com-河北快三走是图| www.967712.com-怎么买彩票能中| www.878777.com-中国福彩积分卡| www.156545.com-彩票五百万税后多少| www.280081.com-今日竞彩专家分析| www.346883.com-明彩笔-| www.722255.cc-竞彩足球彩票分析| www.865931.com-彩票123是真的吗| www.948994.com-国彩彩票下载| www.997874.com-乐彩走势图大全| www.cx63.com-福彩3d每天一金码| www.tm78.cc-彩票算号器-| www.03dq.com-彩票k线图教程| www.5080.vip-能用手机买福彩吗| www.672797.com-休闲快三九寨红叶| www.402178.com-福彩3d杀号胆码| www.001.name-非凡彩瓦-| www.38596.cc-爱尚彩app下载| www.6330.top-三彩服饰春装| www.918018.com-5分时时彩不是官方| www.19916.cc-红彩视频注册邀请码| www.zk32.com-河南福利彩票跑马| www.71657.com-天天彩3d开奖结果| www.ig06.com-网上买足彩-| www.63xl.com-网络销售彩票判多久| www.3667.xyz-新浪竞彩电脑版| www.4899.biz-集美体育彩票店转让| www.798567.com-贵港体彩中心| www.885773.com-如何破解567彩票| www.979150.com-旧版够力七星彩| www.gq4.cc-北京福彩快三开奖| www.397589.com-彩票几点停止| www.777794.com-买彩票的app排行| www.528.hk-高频彩有赢的吗| www.278739.com-快三跨度是啥意思| www.393981.com-彩厍宝典大全| www.523702.com-体彩14场胜负开奖| www.636314.com-彩虹短文阅读| www.948396.com-福彩双色球主任是谁| www.e15.mobi-好123彩走势图| www.0088.cn-中国彩票查询下载| www.9747.cn-大发时时采彩稳赚| www.894860.com-天宏国际彩票真假| www.969416.com-2118彩票app| www.cp987.com-三分快三破解器下载| www.25np.com-迷彩兔怎么打不开机| www.732205.com-足彩预测胜负彩专家| www.882169.com-九八彩票是平台吗| www.3154.live-彩票怎么查看| www.374484.com-东方集团彩票靠谱吗| www.k50.xyz-广西彩票快三app| www.527579.com-赢彩王账号密码共享| www.613830.com-强强双色球彩票软件| www.4208.vip-中交海建七彩中交| www.69926.com-竞彩篮球编号| www.065912.com-网赌送彩金-| www.709832.com-亿彩安卓-| www.795848.com-天天彩官网-| www.875080.com-手机打彩票是什么| www.936912.com-微彩app是真的吗| www.985184.com-竞彩足球平局排除法| www.mq7.com-爱彩乐官方网站| www.757655.com-淘彩tc8co-| www.876632.com-内蒙古快三链接| www.8481.cm-k彩民福地登录| www.479976.com-下载新浪福利彩票| www.403667.com-彩名堂手机赛车计划| www.8905.com-重庆时时彩.apk| www.0yg.com-手机在线能买彩票吗| www.122616.com-彩神512i喷绘机| www.377801.com-河南体彩怎么兑奖| www.507484.com-cpcp彩票官网| www.613882.com-cbcp彩票-| www.709768.com-网上玩彩票的靠谱吗| www.hs03.cc-彩之家app下载| www.61bb.cc-赢家彩票网址| 网易彩票www.07163s.com| www.gf85.com-快三是谁开奖| www.909118.com-星彩无惨ed2k| www.270675.com-7彩网官方下载| www.nc4.com-江苏快三中奖玩法|