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.789044.com-竞彩分析唯彩网| www.901478.com-精彩十分下载| www.978755.com-好彩1开奖走势| www.cp9300.com-彩8下载-| www.453618.com-华达竞彩现在能用吗| www.383928.com-二四六彩票-| www.338992.com-胜负彩合买-| www.702671.com-有没有三位数的彩票| www.890679.com-至尊彩app官网| www.993140.com-带玩彩票赚钱| www.001.gg-中彩吧娱乐登录| www.6027.me-山东福彩中奖规则| www.089188.com-七星彩开奖第48期| www.179488.com-5分快三群骗局揭秘| www.284122.com-彩票怪号-| www.11998.com-江苏快三购买技巧| www.v27.in-贵州体彩快-| www.0935.loan-重庆竞彩全天计划| www.54447.cc-福彩3d高手群| www.029775.com-体彩兑奖后多久到账| www.121483.com-彩票提现成功未到账| www.189778.com-河南体彩票-| www.762916.com-开彩票店前景| www.870937.com-彩票缩水助手| 500彩票www.51515t.com| www.481133.com-移动和彩印是什么| www.567092.com-彩虹蛋糕儿童画图片| 大赢家彩票平台www.375951.com| www.848626.com-2m彩票8080c| www.542739.com-时时彩的玩法| www.y38.cc-彩票有中奖的没| www.547.hk-高频彩每天赌两把| www.7883.cc-高频彩票助手软件| www.368180.com-哆咪奖七星彩| www.89678.cc-中港彩票投注计划| www.94ey.com-全球基诺彩-| www.039118.com-七彩格子是干嘛的| www.848146.com-网易彩票网彩票| www.698368.com-彩虹颜色的顺序图片| www.323185.com-头彩彩票网站合法吗| www.521496.com-高新二路体彩彩票站| www.13806.cc-七乐彩走势图彩乐乐| www.967493.com-买彩票导师-| www.971575.com-中国福彩票开奖| www.al33.com-彩票投注计算器| www.54xg.com-彩神说头条号陈老师| www.384605.com-okooo澳客彩票| www.655539.com-网易彩票址是哪里| www.3gf.com-京彩娱乐地址| www.845.in-福彩家彩论坛| www.68pa.com-中国福利彩票字体| www.001984.com-七星彩经典彩版| www.665483.com-网易开奖直播七星彩| www.803657.com-牛彩网藏机图汇总| www.558960.com-呼和浩特体彩中心| www.513637.com-时时彩五星复式5码| www.633455.com-幸运彩一-| www.736929.com-福彩3b败家子字谜| www.831788.com-福彩七乐彩开奖现场| www.954137.com-有什么好的彩票软件| www.km1.com-安徽快三官方下载| www.022614.com-快三爱乐彩开奖结果| www.71481.com-专业高频彩计划网站| www.by85.com-彩票招商术语大全| www.707455.com-腾讯分分彩出现漏洞| www.3760.vip-今晚的七星彩开什么| www.028807.com-cp彩票安卓版官网| www.im30.com-广东福彩电子投注单| www.084609.com-天天赢彩票怎么样| www.156283.com-哪里有广西快三开奖| www.459006.com-体彩容错一场| www.555553.com-三吉彩花-| www.617615.com-彩票开奖有规律吗| www.692636.com-6678彩-| www.848823.com-篮球直播唯彩| www.954217.com-709彩票平台安卓| www.34cg.com-福彩3d彩报全彩| www.77097.com-玩彩票技巧稳赚不亏| www.418.tv-腾讯分分彩游戏下载| www.137019.com-金彩网高手网彩票| www.876584.com-私彩代理怎么拉人| www.757979.com-99彩票可信吗| www.879833.com-网彩有赚钱的吗| www.500660.com-公司要求平分彩票0| www.626623.com-时时彩三胆技巧| www.765776.com-七乐彩直播开奖记录| www.6595.xyz-邪恶道大全全彩| www.33515.cc-凤彩网专家排列三| www.954448.com-香港马牛蛙彩票图库| www.276844.com-河南快三选号技巧| www.434558.com-周彩票-| www.619404.com-足球彩票胜负彩推荐| www.869752.com-体育彩票种类| www.997793.com-彩票天天乐下载| www.xu00.com-三晋福彩网-| www.81vf.com-世界杯彩票最高奖金| www.854338.com-多彩网客户端| www.627850.com-来彩网下载-| www.741037.com-探探投彩诈骗| www.881539.com-电竞博彩怎么玩| www.cp077.com-一分快三计划网在线| www.66172.cc-体彩大乐透机选器| www.081910.com-中彩网靠什么盈利| www.n70.org-彩票怎看-| www.717210.com-名画彩铅-| www.0487.vip-幸运彩开奖结果| www.605024.com-盈盈彩平台-| www.739297.com-买彩票幽默图片| www.856122.com-qq上的快三计划群| www.jy75.com-数字破解七星彩| www.0750.tv-彩票幸运28的漏洞| www.761685.com-七乐彩胆拖式玩法| www.847848.com-彩票助赢软件怎么样| www.747365.com-趣彩app-| www.860470.com-合肥彩票中心| www.925298.com-北京新快三查询| 好彩头彩票www.23579e.com| www.oq28.com-彩票官方投注客户端| www.28bv.com-体彩中三位数多少钱| www.2242.vip-3d彩票魔鬼图| www.9311.in-统一彩票兼职真假| www.81751.com-网络快三赌博有假吗| www.504722.com-88爱彩邀请码| www.441823.com-世界杯竞彩赔率| www.169856.com-甘肃体彩11-| www.237946.com-福利彩票自动选号器| www.234667.com-安微快三和值走势图| www.308409.com-快三怎么看和值技巧| www.376281.com-彩家园彩票-| www.510524.com-亲子彩虹的约定视频| www.397862.com-19003七星彩| www.585737.com-时时彩单双怎么倍投| www.332406.com-海口彩票网图版下载| www.393232.com-长春开彩票站| www.480648.com-喝彩中华最新一期| www.556001.com-查询七乐彩开奖信息| www.607038.com-打彩票选哪个数字好| www.667792.com-福利彩票机构职能| www.730318.com-尊彩网页版-| www.790309.com-江苏快三选号图| www.845722.com-有钱人买彩票吗| www.901346.com-菩萨赐彩票-| www.953746.com-好彩蓝莓柠檬爆珠| 公益福彩www.gyfc9.com| www.291517.com-河南快三遗漏号码| www.89382.com-福彩8676-| www.h31.org-七星彩开奖领奖时间| www.127547.com-彩6梗-| www.5230.mobi-派彩为负-| www.11318.cc-彩票一一-| www.ga89.com-浙江快乐彩走势图| www.aj89.com-七星彩今期-| www.1229.vip-华彩在线-| www.945120.com-福建省福利彩票开奖| 好彩www.60123p.com| www.sa18.com-福彩app官方| www.585039.com-好彩官方网0567| www.250393.com-中彩彩票推荐码| www.m78.net-卖福彩提成多少| www.dm38.com-乐和彩官网-| www.su06.com-时时彩思路-| www.418369.com-彩票中了一等奖之后| www.519827.com-五福彩票下载送28| www.581850.com-河北体彩兑奖地点|