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天

知道了
9彩注册 www.32371.cc-8k彩票快3-| www.839951.com-福利彩票都包括哪些| www.35wv.com-彩票009-| www.07305.com-澳彩大盘升盘| www.033761.com-如意彩票网app| www.265181.com-中国福彩3d图| www.81ih.com-福少时时彩在哪下载| www.184850.com-福彩快三走势图安微| www.87944.cc-网络彩票跟单兼职| www.025382.com-易彩一彩民福地客服| www.203896.com-百姓彩票是不是骗子| www.685816.cc-28日福彩结果| www.806578.com-彩票32期中奖号| www.029724.com-彩虹屁是什么梗| www.41.com-500购彩主页| www.669720.com-北京中彩快印电话| www.878492.com-天天益彩-| www.os21.com-北京5分彩走势图| www.7023.cc-买彩票有技巧吗| www.281588.com-彩之家平台是真的吗| www.590251.com-彩票图纸今天| www.823530.com-彩涂铝板与彩涂钢板| www.281433.com-时时彩五星和值23| www.74di.com-宝彩为未来买单| www.747771.com-彩运宝ios-| www.039336.com-搜狐彩票是合法的吗| www.140106.com-福彩数字3几点开奖| www.233577.com-中国体育彩票有哪种| www.569016.com-时时彩搭建一条龙| www.102239.com-体彩开奖公告结果| www.906318.com-黑彩平台如何拉人| www.gd41.com-福彩快三是真是假| www.13ci.com-九州体彩-| www.787444.com-竞彩赛程表-| www.928103.com-彩色复印机印钱| 中国福利彩票www.08588t.com| www.567763.com-c36官方彩票| www.96200.com-彩之星登陆页面| www.622529.com-福彩双色球真实新闻| www.874652.com-体育彩票玩儿法| www.93pz.cc-希腊玩什么彩票| www.810183.com-彩票顾客显示屏| www.891001.com-福利彩票站开业宣传| www.966229.com-凤凰快三下载安装| www.cp4366.com-快三什么叫三军玩法| www.284916.com-体彩481开奖通知| www.856069.com-云南畅游快三| www.913366.com-58彩票网址-| www.973503.com-有关彩虹歌词| www.as41.com-一分钟网络彩票| www.4544.com-有人买彩票中奖的吗| www.546575.com-彩票网站建设ag| www.07170.com-竞彩比分直播双色球| www.50va.com-福彩专家双胆预测| www.5718.vip-彩票软件开发系统| www.915755.com-福利彩票怎么加盟的| www.jz3.cc-江苏福利彩票官网| www.s99.cc-七乐彩专家胆码预测| www.718.hk-vr重庆时时彩开奖| www.545221.com-cc彩票怎么注册| www.739672.com-网上彩票赔20万| www.057633.com-彩神帝登录-| www.280332.com-广东快乐彩走势图| www.382867.com-体彩彩票19078| www.cp2199.com-北京福彩快3下载| www.867818.com-历史七星彩所有怪号| www.948061.com-开体彩与福彩哪个好| 818合彩www.www.9889hc.com| www.nf68.com-cp038彩票-| www.388871.com-手机彩店-| www.623004.com-鸿彩在线-| www.688287.com-广东福彩投注平台| www.780857.com-彩票开奖查询软软件| www.867906.com-时时中彩票官网登录| www.944458.com-彩票坊下载-| www.988179.com-中国福利彩票积分网| www.bm50.com-福彩快3平台| www.089027.com-金福彩票网站登录| www.130350.com-彩票大乐透怎么玩法| www.206939.com-68彩票下载app| www.557556.com-福利彩票40万个税| www.632552.com-彩票什么规则| www.695967.com-彩票复式计算器| www.777849.com-精准快三计划| www.847313.com-彩礼8万女方陪嫁| www.903772.com-富贵彩票网址| www.962894.com-福彩3d彩图库| 500彩票www.50052x.com| www.18od.com-十一选伍彩票| www.zf82.com-开心彩票骗局| www.70ln.com-安徽快三列表| www.220249.com-炫乐彩票cxlp| www.863746.com-132彩票是官网吗| 大赢家彩票平台www.810531.com| www.194088.com-极速快三是骗局吗| www.873422.com-彩38网站下载| www.y55.cm-福彩15选5开什么| www.19165.com-福利彩票特等奖彩票| www.021024.com-福彩3d猜一d| www.103579.com-彩8彩票平台| www.qb96.com-庆典彩烟价格| www.445523.com-体育彩票大乐透奖励| www.wy2.cc-双彩论坛首页| www.877246.com-七乐彩下期预测| www.se9.com-彩票快讯-| www.263.org-国际彩票娱乐| www.297932.com-安徽省体彩中心| www.906413.com-我想进吉林快三群| www.445060.com-下彩彩-| www.771736.com-澳洲国际时时彩| www.689267.com-晓艳七乐彩预测| www.840819.com-关于福彩网被骗| www.24633.com-彩铅品牌排行| www.018668.com-足彩购买软件哪个好| www.637210.com-福彩303app-| www.eq54.com-快三预测神器软件| www.55278.cc-福彩3d过滤程序| www.131939.com-福利彩票开奖结果福| www.671764.com-全民彩金捕鱼| www.oi79.com-青海时时彩走势图| www.25863.cc-聚彩彩票主管| www.019400.com-安顺体彩中心| www.398028.com-五福彩票骗钱| www.366317.com-河南省彩票中心在哪| www.591568.com-红彩网网址-| www.801914.com-今天的福彩中奖号码| www.954807.com-彩助手-| www.by42.com-广东福彩官网| www.76ay.com-打彩怎么才能稳输呢| www.556446.com-体彩106-| www.691225.com-易彩国际客服| www.110647.com-微信口袋彩店二维码| www.903707.com-福彩金码今天| www.970006.com-彩票带单-| www.ad.com-共享彩票快三| www.qn28.com-快三走势图表格下载| www.5qa.com-足彩中了要交税吗| www.7575.in-宏盛彩票分析软件| www.bb36.com-大发快三大小公式| www.186737.com-快三输了怎么回本| www.468096.com-北京七星彩开奖结| www.579354.com-福彩3d返奖率| www.656474.com-乐亿彩票可以提现吗| www.731416.com-彩八彩票电脑版| www.151600.com-彩票77是真的吗| www.226831.com-新快三手机版| www.872072.com-东涛体育彩票| www.300.vip-网上买彩票赔了咋办| www.4100.vip-700彩票app-| www.060941.com-牛浙江快乐彩走势图| www.893988.com-彩九九app-| www.019595.com-体彩山西11选五| www.598906.com-天天爱彩票怎么提现| www.75.net-hk百彩网开奖包中| www.913878.com-南京福彩领奖现场| 顶级娱乐www.047788.com| www.796092.com-彩票选号神器有用吗| www.874342.com-快三有人控制| www.939671.com-福彩通是真是假| www.165753.com-黑龙江省福彩中心| www.91ee.cc-家彩网千禧试机号| www.fc02.com-中福网彩票合法吗| www.tu12.com-江苏爱乐彩快3| www.65ej.com-彩票专业计划软件|