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.9969.tv-百度彩票查询| www.618471.com-开体彩店标准| www.708944.com-豪赢彩票app| www.791748.com-时时彩官方正规平台| www.884454.com-湖北福彩快三app| www.956247.com-网上彩票有赢钱的吗| www.cai36.cc-快三是什么意思| www.nj67.com-福彩预测-| www.1266.online宿迁福利彩票点| www.397341.com-彩票中奖视频故事| www.578986.com-速赢彩用户注册| www.661052.com-购彩平台导航| www.736668.com-上海体彩中心在哪里| www.816369.com-云南时时彩官网| www.899597.com-52xyc幸运彩| www.966056.com-福彩快三是不是假的| 500彩票www.657832.com| www.lj28.com-中彩这个软件正规吗| www.pb7.com-贵州快三预测号推荐| www.668015.com-彩无双登录-| www.563546.com-q彩注册邀请码| www.563762.com-彩46下载-| www.705602.com-彩发发-| www.822505.com-如何提高彩票中奖率| www.922856.com-体彩代销证到期了| 500彩票www.383571.com| www.rc40.com-香港体彩走势图| www.58tk.com-湖北精彩十分规则| www.530419.cc-新浪竟技风暴彩票网| www.105918.com-中国彩票走势图| www.538884.com-竞猜足彩混合过关| www.758821.com-买彩票不中奖原因| www.521817.com-喝彩中华2018| www.zu56.com-彩96购彩平台下载| www.08631.com-九州彩票登陆| www.54582.com-博胜彩票网投| www.953906.com-天下彩票计划| www.ez99.com-破解幸运快三软件| www.yv89.com-红旗彩票-| www.501865.com-体彩二码遗漏表| www.hs25.com-江苏快3爱乐彩| www.017852.com-怎么购买双色球彩票| www.119268.com-买彩票那个软件好用| www.227655.com-快乐投手机购彩软件| www.63996.cc-足彩低赔是陷阱| www.037743.com-七乐彩手机选号| www.111453.com-辉煌团队彩票计划| www.40834.com-宁德体彩管理中心| www.629.hk-918彩票网站| www.24499.com-k8彩票官方网站| www.81122.com-乐彩图表工具| www.019462.com-福彩助手app| www.144236.com-北京快三怎么玩稳赚| www.112124.com-肥城中三亿彩票| www.0284.xyz-销售彩票-| www.7247.xyz-彩虹阅读-| www.8242.vip-杨幂代言品彩| www.47587.com-辽宁省福彩3d走势| www.94106.cc-中国福彩报告| www.6049.pw-重庆体彩网点查询| www.024935.com-澳门福彩快三查询| www.120809.com-体育彩票网点提成| www.238615.com-481开奖视频彩| www.268059.com-体彩票开奖31选7| www.111757.com-好彩彩吧-| www.270829.com-彩6app苹果版| www.433328.com-贵阳彩票领奖| www.409.vip-高频彩票输得快| www.802928.com-买100元彩票| www.6250.cn-七星彩十大专家杀| www.fw93.com-天天中彩票骗局揭秘| www.03ik.com-网易彩票玩法| www.17828.cc-福利彩票官方app| www.055932.com-赛车彩票怎么玩稳赢| www.699999.com-竞彩网首页资讯中心| www.0311.live-彩虹的约定歌曲儿歌| www.557534.com-皇室彩票是骗局吗| www.8887.in-竞彩最多几串1| www.nu03.com-福彩算赌博吗| www.115266.com-彩色混凝土地面价格| www.577601.com-黑彩犯法吗-| www.663225.com-新浪彩票机选| www.782978.com-七乐彩现场开奖| www.861968.com-福利彩票店低价转让| www.516520.com-彩票ceo-| www.687333.com-体彩官网世界杯| www.781504.com-马来西亚福利合乐彩| www.862520.com-七星彩票开奖号| www.936295.com-聚宝盆app福彩| 中彩网www.61233n.com| www.029891.com-内蒙古体彩彩app| www.cx48.com-博彩app列表| www.261850.com-中国福体彩开奖| www.336020.com-三亚彩票私彩| www.cai4255.com快三口诀对应号| www.03129.com-快三计划倍投表| www.18455.com-彩票双色球选号器| www.ug99.com-苹果彩票pg11| www.312622.com-彩票一元购-| www.286108.com-成都快三购彩app| www.633506.com-汇彩网提现-| www.727321.com-彩之王-| www.656465.com-北京个人彩票店转让| www.557874.com-大赢家彩票网合法吗| www.66fp.com-pk10彩票-| www.6824.cc-极速3d彩票官网| www.736851.com-彩票中心app| www.916507.com-致富彩-| www.95wr.com-鸿博时时彩平台| www.7974.vip-彩博赌博正规网站吗| www.103565.com-体育彩票包括哪些| www.484281.com-福彩3d金胆传奇| www.787525.com-排列三走势图彩经网| www.mz31.com-北京快三号码推荐| www.57tz.com-花呗充值彩票| www.0659.cm-香港5分彩稳定计划| www.6080.biz-顺势而为彩票讲解| www.379629.com-彩票中中大奖| www.555916.com-彩票全国代购| www.622373.com-星彩手机网-| www.720960.com-那款彩票app好用| www.829654.com-皇帝彩票资金安全吗| www.889157.com-易彩网彩票3d| www.948678.com-福利彩票年销售额| 彩天下www.c1395.com| www.43524.cc-旺彩双色球靠谱吗| www.171062.com-大发快三怎么买能赢| www.236121.com-50o万彩票网| www.314313.com-3d彩报图-| www.0983.site-彩票台子送彩金| www.371111.com-自制彩票走势软件| www.454369.com-快乐双彩游戏规则| www.32155.cc-足彩比分新浪| www.888842.cc-鹤壁彩票中奖| www.72mx.com-七星彩票开奖历史| www.096456.com-3d预测好彩网| www.196959.com-熊猫彩骗局-| www.3840.cn-台湾六星彩开奖现场| www.32939.cc-极速五分彩官方开奖| www.016743.com-三分钟时彩下载| www.133790.com-好彩客网站-| www.012175.com-v9彩票app下载| www.077156.com-新彩网3d字谜| www.356725.com-安徽快三开奖结婚果| www.152009.com-爱彩通过滤软件| www.809690.com-多彩网3d走势图| www.872951.com-37彩票-| www.926133.com-七乐彩除9走势图| www.970716.com-买彩票幽默句子| 13e彩票www.707232.com| www.ge89.com-网上购彩骗局揭秘| www.uo24.com-体彩什么时候开奖| www.hx77.cc-彩票回补几率负| www.435432.com-都匀彩票店位置| www.531261.com-艾彩原创-| www.137026.com-福彩奖号-| www.382805.com-360足彩指数| www.655872.com-博友彩是真的吗| www.802233.com-女神精彩视频| www.877130.com-免费看彩票指南报纸| www.965415.com-福彩极速3d-| www.cp8181.com-大发快3彩票| www.853996.com-嘉兴体彩官网| www.923357.com-009彩票靠谱吗|