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天

知道了
1分快三 www.br54.com-内蒙快三开奖纟结果| www.50xd.com-澳客足彩网胜负彩| www.rc16.com-分分时彩下载| www.976056.com-许昌结婚彩礼| www.974101.com-亿博彩票1分彩计划| www.lg27.com-体彩官方购彩app| www.003858.com-广东福彩22选1| www.109667.com-杏彩平台登录网址| www.206278.com-乐点大发彩票| www.30118.com-附近竞彩店-| www.56165.com-慱发彩票-| www.7505.cc-在体彩店上班怎样| www.613795.com-彩虹六号国服| www.8428.top-星彩代挂-| www.90366.com-虚拟彩票摇奖机下载| www.209654.com-福彩旗下的快开彩| www.847003.com-体彩申请条件| www.978430.com-u9彩票app下载| www.5cu.com-苏州福利彩票| www.495329.com-电竞博彩业-| 500彩票www.52072h.com| www.165501.com-福彩中心上班待遇| www.823229.com-安徽体彩6十1走势| www.925255.com-快三多单双预测分析| 彩之家www.19czj.com| www.77748.com-体彩机器故障| www.652380.com-体彩排列期开奖| www.750815.com-天天彩正规的吗| www.853025.com-一分快三计划高手| www.975213.com-下载汇彩网-| www.ea1.com-中彩官方网站| www.959891.com-三分时时彩qq群| 七星乐www.535666a.com| www.66221.cc-梦见中彩票了| www.032591.com-国乐彩安卓下载| www.143400.com-福利彩8在哪发计划| www.447700.com-大彩开挂-| www.689030.com-山东七乐彩晓艳之声| www.470433.com-体彩竞彩合法吗| www.304676.com-十一选五彩票助手| www.983579.com-时时彩赛车计划网站| www.057654.com-七星彩卖到几点钟| www.649287.com-彩跑需要准备什么| www.qp25.com-彩70彩票-| www.0839.cc-网上怎么购买足彩| www.08509.com-福彩网上兑奖app| www.565686.com-天娱彩票平台骗局| www.365376.cc-七彩下期开奖| www.283682.com-七乐彩3+1有奖吗| www.090503.com-南宁体彩中心| www.378411.com-金盏离彩红路有多远| www.800052.cc-11选5购彩窍门| www.97166.cc-三天计划必出福彩| www.376808.com-福彩36选7中国| www.4155.cm-彩虹的重力评价| www.974174.com-重庆福彩网刮刮乐| www.776111.cc-速彩网诈骗-| www.5949.org-黑龙江体彩中心电话| www.448885.cc-彩麒麟理财有icp| www.564729.com-极客彩票-| www.650725.com-中班户外彩虹伞| www.875691.com-重庆时彩预测app| www.66656.cc-足彩8串1的概率| www.322103.com-南国特区七星彩论坛| www.788381.com-雪缘彩票首页| www.312936.com-乐彩双色球字谜汇总| www.221110.com-香港正规彩票网站| www.515028.com-中国彩妆十大排行榜| www.610095.com-香港开奖彩票777| www.708633.com-中国足球体育竞彩网| www.780861.com-彩票开奖源有什么用| www.099876.com-彩票走势网首页网| www.257120.com-彩票大数据定律| www.488155.com-福彩3d排序图| www.839306.com-5o0万彩票网官网| www.960578.com-有哪些彩票领彩金| www.if7.cc-快三怎么买-| www.969629.com-乐乐彩票开奖| 旭彩www.565378.com| www.hv58.com-三分彩票是不是假的| www.xp15.com-快三怎么样比较稳赢| www.16hp.com-最新体育彩票中奖号| www.137628.com-七星彩开结果奖直播| www.702732.com-聚星pk10彩票| www.890885.com-皇冠快三开奖结果| www.954670.com-hao彩票123-| www.998415.com-天通苑附近体彩店| www.cj80.com-江苏体彩七位数开奖| www.rt88.com-中彩网快3-| www.678600.com-精英彩票论坛| www.757666.cc-美国一分彩-| www.826425.com-98c彩票10余年| www.890808.com-青岛快三开奖走势图| www.956797.com-小猪彩泥手工| 福利彩8www.flcb6.com| www.730794.com-凤凰竞彩下载app| www.618405.cc-中博彩票注册邀请码| www.051822.com-彩八彩票手机版| www.781814.com-一分快三黑彩| www.266610.com-一分钟快三开奖官网| www.950870.com-快彩网技巧-| 福彩www.86267c.com| www.fo38.com-浙江体彩网手机版| www.yr17.com-竞彩平负是什么意思| www.14mf.com-七星彩冷热怎么查询| www.7664.xyz-时时采彩宝典安卓版| www.45801.com-南洋彩开奖结果查询| www.143468.com-好彩店彩票官网| www.875133.com-酷彩购彩票靠谱吗| www.1307.pw-红彩会登录手机登录| www.665133.com-七星彩那几天开奖| www.008910.com-彩票是什么性质| www.967495.com-安微快三万能走势图| www.cai0322.com快3彩票下载| www.jp56.com-科彩吧-| www.zy63.com-七星彩画规律表| www.28ci.com-微信上腾讯彩票娱乐| www.343.me-凯发彩票靠谱吗| www.73yk.com-3d彩天天彩报| www.2885.biz-彩票网大转盘| www.48gw.com-体彩柜台-| www.5415.pro-足彩赛果-| www.yp05.com-吉林快三跨度表图片| www.22160.com-百号彩票下载安装| www.90554.com-富赢彩票下载| www.558852.com-夸女生漂亮的彩虹屁| www.609279.com-今晚七星彩测什么号| www.733989.com-杭州竞彩快三开奖| www.365892.cc-福彩和值遗漏分析| www.7103.vip-开封七彩集团幼儿园| www.553.cn-彩福网天空彩| www.15604.com-中彩网综合走势图表| www.52551.cc-好彩客在哪下载| www.652712.com-西安多彩批发市场| www.ss40.com-天吉双彩论坛手机版| www.2vj.com-完美彩票a-| www.46de.com-秒速时时彩登录网站| www.151036.com-彩漂液对身体有害吗| www.323776.com-所有彩票开奖app| www.489863.com-9b彩票百胜登录网| www.719129.com-周杰伦彩虹歌词意思| www.070052.com-快三开奖遗漏号码| www.871882.com-陕西利彩快3娱乐| www.34782.com-中国彩吧牛彩首页| www.886911.com-网赌高频彩重注都死| 购彩票www.c5909.com| www.ij78.com-安卓彩票下载| 大赢家彩票平台www.375963.com| www.375498.com-彩经网福彩走势图| www.58856.cc-体彩排列五开奖中奖| www.203282.com-一分钟网络彩票| www.513998.com-竞彩开奖查询| www.926400.com-彩票价钱-| www.879171.com-福彩开奖结果百度| www.949131.com-电脑彩屏-| www.992362.com-大发快三心得体会| www.bm05.com-国民彩票app| www.uf07.com-那个是凤凰私彩平台| www.1sx.cc-湖北体育彩票app| www.69ye.com-红菜苔彩票单关| www.0347.cn-附近有中国福利彩票| www.382303.com-下载智慧彩快3| www.540684.com-懂球帝怎么买足彩| www.617395.com-福利彩票1月7号|