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.633092.com-竟彩蓝球大小分| 500彩票www.50024q.com| www.6896.loan-福建好彩头公司电话| www.ci70.com-乐彩app-| www.129.bid-彩虹屁英语-| www.009989.cc-福彩六码遗漏| --七星彩画规神器| www.773596.com-彩票百分百中奖秘籍| www.901046.com-东北彩王马洪平| www.004854.com-双色球彩票33| www.810116.com-360官方彩票网站| www.823840.com-七星彩内部会员卡| www.931882.com-多多中彩票网| www.re10.com-很灵的彩票中奖咒语| www.14sv.com-手机彩票评测网| www.740440.com-澳门彩票下载| www.897605.com-体彩竞彩胜平负结果| www.483906.com-上海彩票亭拆除| www.1362.cn-彩票得奖是否真实性| www.5198.net-韩国快三一共多少期| www.34kx.com-甘肃彩票下载| www.1189.cn-彩票站改革背后| www.7897.cc-什么平台有香港快三| www.32209.com-体彩段组-| www.547009.com-安徽快三是国家的吗| www.197755.com-排三乐彩17500| www.315501.com-七彩阳光广播操| www.198795.com-体彩输的倾家荡产| www.310973.com-80彩票app-| www.3491.vip-博彩平台出租| www.479183.com-七星彩合分怎么打| www.61129.cc-非法彩票的定义| www.242639.com-金誉彩票官方网| www.104104.com-彩票一等奖多少钱啊| www.119114.com-开福彩投注站赚钱吗| www.693907.com-中体彩官网app| www.385159.com-七星彩守号中奖新闻| www.306224.com-中奖彩票图片| www.217133.com-五分快三走势怎么看| www.316559.com-买彩票app下载| www.83828.com-怎么在手机上玩彩票| www.349652.com-九万彩票太坑| www.549700.com-易彩手机更新版本| www.7005.vip-足彩一注2元赢多少| www.90958.cc-好彩烟和万宝路| www.200069.com-体彩开奖查询彩| www.78ax.com-76彩票-| www.1590.top-成化五彩特点| www.290016.com-彩铅画简单入门图片| www.84gb.com-彩福3d买法-| www.4192.cn-南粤风采好彩一开奖| www.181911.com-安福彩快三走势图| www.286268.com-东北人玩的福彩| www.388851.com-微信群发送彩金平台| www.516521.com-彩票银海图-| www.628675.com-福建省体彩中心主任| www.971428.com-快播彩票手机版下载| www.ob85.com-大发彩票大发快三| www.25zl.com-彩友什么意思| www.037785.com-乐彩网代理邀请码| www.cai5488.com河南福彩快三走势图| www.356736.com-做彩票网络销售经理| 奔驰彩票www.29178h.com| www.92238.com-精彩彩票网-| www.425527.com-彩票的利与弊| www.543166.com-江苏体彩大乐透玩法| www.vj29.com-彩易福彩-| www.nx67.com-人人快三投注| www.857316.com-微信玩彩团队是什么| www.945466.com-体彩顶呱刮7| www.994098.com-天天中彩靠谱吗| www.by68.com-快彩网app下载| www.82281.com-福彩快三35期| www.036279.com-五分彩稳赚公式软件| www.nv10.com-公务员买彩票受处分| www.297846.com-彩02彩票下载安装| www.405056.com-彩票邀请码贴吧| www.995465.com-足彩冷热表-| www.0515.bid-公益彩票有哪些| 大钱庄彩票www.449589.com| www.812853.com-黑龙江体彩首页| www.84442.cc-彩钢瓦料-| www.196102.com-幸运快三规律破解| www.155060.com-足彩购买时间| www.433100.cc-双色球杀号彩吧| www.126688.cc-体彩排五走势图| www.05811.com-赠彩金的游戏网站| www.88973.com-ok彩票安卓版官网| www.454541.com-彩票两元中多少| www.586245.com-吉利三分彩走势图| www.701907.com-体育竞彩推荐app| www.813016.com-买彩票搞笑图片| www.iw.com-彩票是赌博-| www.214428.com-人人彩下载到手机| www.318518.com-重庆1分彩个位| www.403372.com-七星彩软件有哪些| www.018461.com-众赢彩票app| www.903889.com-花式快三教学分解| www.369035.com-越南彩票-| www.514882.com-国产口碑好的彩妆| www.612934.com-彩票数字3开奖| www.686529.com-澳彩篮球赔率| www.760059.com-看时时彩走势app| www.830956.com-新彩手机版-| www.909625.com-双彩追加和值谜汇总| www.972379.com-快三游戏中奖规则| 大赢家彩票平台www.910576.com| www.129570.com-彩民中奖-| www.736259.com-内蒙古了快三走势图| www.916.cm-昆明彩票机怎么申请| www.58459.com-彩霸王精准论坛| www.051851.com-福彩3d金码试机号| www.pj62.cc-彩票数据分析方法| www.69385.com-彩博国际-| www.086568.com-自动彩票机加盟| www.182276.com-竞彩网首页-| www.270004.com-彩票77安卓-| www.009501.com-彩798彩票怎么样| www.009962.com-福利彩票不是骗局| www.1399.in-福彩中奖等级| www.8503.cn-福彩3d走势图中彩| www.34144.com-彩吧网3d图迷总汇| www.73097.com-长沙体彩中心电话| www.033960.com-彩票有什么技巧| www.076648.com-彩票有没有0数字| www.912194.com-湛江私彩举报| www.230658.com-挂彩票骗局-| www.16yz.com-彩票刮奖谁中过大奖| www.818.cm-87竞彩app-| www.00377.com-南方双彩论坛| www.86195.com-彩票app怎么了| www.62fa.com-五彩斑斓的世界剧透| www.1473.xyz-优秀彩铅作品欣赏| www.406.cm-旺彩11选五-| www.631953.com-优彩彩票能提现不| www.71335.cc-谁能制作快三走势图| www.024039.com-东方彩票幸运快3| www.089210.com-vr重庆时时彩官方| www.175765.com-河北快三助手| www.245314.com-中国足彩网德甲| www.569632.com-七乐彩一尾数走势图| www.641632.com-彩票的纸多大尺寸| www.704907.com-彩票店买私彩| www.771698.com-重庆时时彩游戏圈| www.829910.com-彩票预测大师软件| www.893900.com-金牛彩票平台可靠吗| www.963954.com-梦见彩虹是什么意思| 吉彩www.602983.com| www.100801.com-乐彩网手机论坛| www.x84.org-福彩棋牌-| www.47kv.com-东方彩虹-| www.677250.com-汇力彩色印刷包装| www.311466.com-休彩甘肃11选5| www.343940.com-福彩3d杀跨度网| www.185662.com-福彩近30期走势图| www.901488.com-幸运快三开奖结记录| www.41522.com-玩儿彩票软件| www.793899.com-c699彩票com| www.938712.com-双赢彩票诈骗吗| www.470520.com-国外足彩推荐网站| www.780450.com-体彩排列3彩吧论坛| www.963062.com-4场进球彩分析| www.3284.vip-绝望的只有买彩票| www.74363.com-风云彩票-|