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.669874.com-什么彩票4位数| www.kr02.com-上海福彩app下载| www.79ck.com-天吉彩票沦坛| www.1307.website鸿运乐彩靠谱么| www.zd07.com-七乐彩中4个号| www.d93.club-竞彩小串关连续中奖| www.733356.com-3d彩保网首页| www.rn90.com-福彩快3如何买合适| www.334949.com-高智商玩彩票| www.768604.com-亚博彩票安全吗| www.78351.cc-福彩3d对吗推算法| www.122406.com-微信代买彩票| www.449.live-重庆时彩开奖视频| www.8396.biz-福彩开业宣传语大全| www.554301.com-官方高频彩开奖网站| www.737631.com-福彩电脑版3d诗谜| www.622008.com-彩票十选五怎么玩| www.707503.com-南充福利彩票加盟| www.gw87.com-内蒙快三最大遗漏值| www.b55.org-微彩网排列五走势图| www.5286.bid-天吉彩票论-| www.84704.com-时时彩两期必中计划| www.105592.com-江苏体彩e球| www.259261.com-奥客彩竞彩比分直播| www.673552.com-中彩网贴吧-| www.04bv.com-手绘彩铅简笔画星空| www.126871.com-优信彩票网站登入| www.278218.com-乐彩下载app| www.783514.com-多乐彩app下载| www.921225.com-彩票3d和值走势| www.610306.com-福彩3d破解软件| www.581950.com-盈彩彩票安卓版| www.696231.com-体彩票中几个号有奖| www.062427.com-彩96官方网站| www.653784.com-江西快三今日开奖| www.778343.com-利彩工具彩助手| www.585849.com-福利彩票买那种好| www.668440.com-中国彩票3d迷图| www.749751.cc-好乐多彩票下载安装| www.815032.com-恒大彩票怎么样| www.882716.com-彩票代投兼职易彩| www.963798.com-手机上玩彩票输了| www.cp958.com-福建快三推荐号码| www.487.mobi-博雅彩票怎么样| www.455399.com-福乐彩是干嘛的| www.601767.com-50万买彩票-| www.218350.com-九州平台全球彩票| www.001465.com-新皇冠彩票怎么样| www.my62.com-福彩三d视频新手| www.114443.com-福彩中心窝案| www.993795.com-胜负彩玩法中奖规则| www.92fm.com-竞彩扣税原则| www.599128.com-港彩网投app下载| 55彩票www.755740.com| www.699510.com-彩票3d玩法与奖金| www.821791.com-3d跨度彩乐乐| www.927113.com-天天彩票能玩吗| 大赢家彩票网www.83033w.com| www.41wt.com-中国竞彩足彩首页| www.071633.com-体育彩票前景怎么样| www.722998.cc-快三包号一共多少注| www.947713.com-多彩贵州网评论| www.na93.com-038彩票苹果手机| www.984878.com-神彩争霸官网| www.971055.com-值得信赖的彩票平台| www.pr64.com-彩神邀请码哪里找| www.966318.com-江苏快三倍投计划| www.7242.vip-彩虹出来时阅读答案| www.503334.com-什么是红彩网直播| www.00yv.com-福利彩票选4开奖| www.1120.vip-玩彩屠龙是什么意思| www.177383.com-盈彩在线骗局| www.040904.com-河北十一选五派彩网| www.5020.cc-褔彩3d今天太| www.027505.com-正规高频时时彩| www.675628.com-福利彩票双色球图| www.750506.com-中彩旧版双色球| www.157123.com-江苏省福彩中心在哪| www.36546.cc-澳门彩票下载| www.897765.com-网上足彩容错怎么买| www.637873.com-淮北福利彩票网点| www.954351.com-家彩网排三胆码预测| www.12824.com-中体彩官网电脑版| www.059074.com-乐彩写真机驱动下载| www.129001.com-福利彩票分分彩| www.34015.com-玩儿彩票能挣钱吗| www.82372.com-快三挂机稳赚模式| www.051516.com-赢彩吧打不开| www.358281.com-白小姐海南彩票| www.489342.com-西安彩票一等奖| www.687305.com-彩民彩票电话| www.797022.com-哪个网上可以买彩票| www.888092.com-彩票106怎么样| www.968561.com-乐彩app苹果版| www.sx9.com-江西快三开奖结果快| www.dy66.cc-699彩票app-| www.439886.com-怎么注册时时彩账号| www.456246.com-财富彩票网址| www.887525.com-下彩网怎么样| www.9964.cm-彩王彩图-| www.64184.com-足彩预测好的app| www.018000.com-天际彩票是不是骗局| www.z42.org-90彩票com-| www.63nt.com-大圣彩票家官网| www.982873.com-彩票资料共享大全| www.hh92.cc-湖北快三助手软件| www.li76.com-中彩票软件官网| www.25uq.com-时时彩压大小稳赢| www.443560.com-福彩3d秘诀-| www.et48.com-北京90年代彩票奖| www.a50.vip-七乐彩玩法规则| www.622812.com-新浪福彩小宋预测| www.266366.com-河北福彩排列3| www.662540.com-兴盛彩票v3登录| www.731507.com-80彩票下载平台| www.802807.com-体彩排列三开奖规定| www.873703.com-c彩83-| 爱购彩票www.355284.com| www.on18.com-中国合法的彩票种类| www.08eh.com-彩涂铝卷加工销售| www.85ta.com-58彩票在线-| www.224123.com-uu快三输了几万| www.358403.com-领头羊时时彩官网| www.553014.com-福彩高频彩分析软件| www.138809.com-鸿运彩票骗局| www.227699.com-彩票端一分快三| www.23598.cc-彩神1号app-| www.91gk.com-机选彩民中奖的故事| www.9698.top-cb8彩票-| www.085223.com-大牌彩票ios| www.219824.com-彩吧助手出号走势图| www.74ml.com-体彩p3直播现场场| www.8928.bid-彩票包赢技术| www.84814.com-佩奇彩票骗局| www.072082.com-国家整顿彩票| www.206023.com-01彩票兼职骗局| www.611718.com-彩虹岛w台服下载| www.807879.com-玩彩票被骗6000| www.cai0766.com福利彩票快3| www.572299.com-时时彩人工计划站| www.ty64.com-彩票平台怎么刷流水| www.gj72.com-1分快三是什么彩票| www.51212.cc-福彩网官方网站平台| www.cr44.com-快三提现是真的吗| www.261079.com-快三守号技巧| www.9502.loan-新浪体育彩票开奖直| www.115698.com-大发快三计算| www.634252.com-建盏出彩过程| www.719967.com-七星彩可以打复式吗| www.793699.com-网上购彩算不算赌博| www.915580.com-彩票客户端版本| www.999895.com-大发快三提现没到账| www.5468.xyz-南京快三开奖| www.25199.com-排三分析预测彩吧| www.74009.com-澳客彩票论坛| www.29.vip-河南福彩豫彩通| www.64fq.com-吉林快三跨度分析| www.504148.com-节目彩排反思| www.u56.club-夭下彩票资料大全| www.6649.org-38彩票网址是什么| www.22731.com-江苏快三手机投注| www.i29.club-福彩3d矩阵宝典图| www.98509.com-分分彩是真吗| www.yh80.com-彩35app-|