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.474140.com-百盛彩托都聊感情| www.721062.com-新②彩票论坛白小姐| www.841055.com-彩票主任判死刑| www.953264.com-头奖彩票百度贴吧| www.ph08.com-快三最新邀请码| www.52lo.cc-彩沙涂料-| www.3741.cc-苹果怎么下载彩库宝| www.06838.com-好运来3d彩票预测| www.76117.com-足球彩票哪里买| www.092598.com-黑龙江彩礼价格表| www.220586.com-彩43-| www.2483.vip-福利彩票出奖号| www.15025.com-福彩栋栋团队| www.67729.cc-红旗彩票网怎么样| www.082741.com-湖南福利彩票报纸| www.159567.com-彩吧图谜第二、版| www.270470.com-新彩网3d手机版| www.374188.com-福彩3d精准杀路数| www.507353.com-亿彩堂邀请码| www.586793.com-电子棋牌送18彩金| www.667922.com-彩票幕后的真相| www.753495.com-102彩票app-| www.879335.com-深圳福利彩票| www.968396.com-英国彩票开奖号码| www.cai6607.com今日甘肃快三预测| www.ny56.com-天天彩票手机论坛| www.07vr.com-彩芽はる愛?緊縛| www.85ql.com-七乐彩三加一有钱么| www.3280.vip-今甘肃快三开| www.9538.vip-中博在线彩票可信吗| www.77258.cc-买彩票有灵感吗| www.033825.com-彩票元网走势图| www.136143.com-广西体彩中心地址| www.222147.com-七星彩专家预测频道| www.306506.com-网售彩票2019| www.383783.com-彩票3d组六走势图| www.553243.com-平台彩票官方网址| www.629088.com-88爱彩登录-| www.965831.com-江苏快三今天豹子号| www.ka3.cc-福彩6+1生肖| www.rs78.com-快三单机游戏| www.27bj.com-东莞福利彩票店转让| www.795.cc-外围体彩怎么买法| www.5585.cn-极速飞艇彩票| www.14582.com-体彩大乐透放假吗| www.63673.com-彩迷中胆专家专栏| www.062151.com-大发彩票是真的吗| www.200415.com-手机彩票网zucp| www.290804.com-湖北快三怎么分大小| www.370160.com-四季彩代理最高返点| www.480602.com-和彩印怎么设置内容| www.567033.com-彩虹蓝底emoji| www.631593.com-顺丰彩票游戏| www.698958.com-华夏彩票合法吗| www.782636.com-利彩平台官网| www.865831.com-凤凰私彩平台| www.940028.com-天津市时时彩官网| 盛大彩票www.ct6675.com| www.ec89.com-彩票刷流水犯法吗| www.xg82.com-注册送18彩票软件| www.23yi.com-体育彩票信息网| www.0943.date-香彩票全年资料| www.7677.top-七七彩票-| www.28126.cc-彩票不中奖-| www.74662.com-七乐彩兑奖-| www.028686.com-黑彩每天赚钱| www.112040.com-足球竞彩专用软件| www.191159.com-甘肃快三遗漏查询| www.257369.com-甘肃快三奖金规则| www.333474.com-彩票算法-| www.411910.com-彩钢棚图片欣赏| www.522332.cc-分分彩助手软件| www.596676.com-甘肃快三2月21| www.675355.com-兴化彩票-| www.755776.com-彩票5000万网址| www.ea23.com-台北快三预测| www.vy90.com-江苏快三改时间了吗| www.14gr.com-七星彩开彩现场直播| www.289.biz-彩票输惨-| www.3994.biz-澳门博彩展览| www.67476.com-彩票为什么不是赌博| www.102943.com-中奖彩票app链接| www.174417.com-湖北精彩十分开奖| www.275617.com-彩名堂计划软件| www.364119.com-不让买世界杯彩票了| www.456174.com-联机盒子彩名| www.547733.com-滚球足彩软件哪个好| www.654414.com-福彩今天出奖号| www.740322.com-今晚澳门彩报2| www.812963.com-杏娱彩票-| www.883797.com-彩报3d图库-| 爱彩www.001ac.com| www.9840.cc-古建彩绘沥粉工具| www.83979.com-七乐彩定胆技巧| www.043263.com-彩票害人的真实例子| www.139933.com-彩399-| www.216837.com-118彩票是真的吗| www.295279.com-吉林快三返奖规则| www.839352.com-浅谈福彩文化建设| www.939056.com-杨震足彩新浪博客| www.988247.com-全民彩票连中彩票| www.cp3325.com-1分快三是官方的吗| www.na16.com-微彩站app苹果| www.7bf.com-体彩竞彩怎么看片| www.63qj.com-诚信快捷时时彩网站| www.136853.com-99彩票网页版| www.217086.com-智博网彩票数字预测| www.268672.com-竞彩猫杨震-| www.433110.com-大富翕彩票平台| www.525306.com-重庆福利彩票店转让| www.630719.com-彩霸王12码期期准| www.698917.com-儿童画彩铅画的好处| www.773095.com-彩票投注网站的图片| www.876119.com-广西快三开奖结果牛| www.954709.com-掌上彩票骗局| www.998327.com-pk彩票登录-| www.ta.cc-宁夏快三开奖直播| www.ms23.com-甘肃快三豹子号遗漏| www.y44.net-财神⑥和彩-| www.50os.com-彩票查软件-| www.590.cm-533彩票的含义p| www.4109.cm-快三苏州开奖结果| www.9172.online七乐彩中奖分布| www.69314.com-体育竞彩赛事公告| www.054956.com-国彩怎么提现| www.132285.com-濮阳清丰彩礼| www.201933.cc-利彩下载-| www.268800.com-台湾快三查询| www.441110.com-苹果炫彩动态壁纸| www.528590.com-福建31体彩走势图| www.618165.com-幸运中福彩3d| www.684258.com-一地的彩票图片| www.758000.com-彩票怎么刷流水| www.861103.com-好彩2中奖奖金多少| www.920608.com-幸运快三技巧顺口溜| www.968958.com-彩神星光喷绘机| www.cm86.com-福州快三开奖结果| www.sj86.com-时时彩网app| www.03ja.com-v8彩票官网-| www.66ig.com-福利彩票选法| www.0331.org-釉中彩是否有毒| www.7838.loan-职业买彩-| www.22182.cc-天天福彩图-| www.59585.cc-88彩票专家app| www.025661.com-七乐彩开单式奖结果| www.092464.com-9号彩票捷豹平台| www.151540.com-3d字谜多彩网| www.251654.com-中彩客服-| www.315190.com-彩票分析软件排行榜| www.379068.com-湖南快三开奖| www.517306.com-安徽体彩中心在哪里| www.579673.com-6彩世家-| www.646206.com-竞彩足球经验| www.747490.com-k彩福民福地测速| www.807402.com-7·k彩票-| www.873534.com-天空彩票正版料| www.962228.com-福彩三d走势图软件| 万历彩票www.77114d.com| www.cp35.com-如何玩3d福彩| www.sz41.com-什么彩票是6位数的| www.16pz.cc-今天体彩奖号是多少| www.89ye.com-彩漂能洗黑色衣服吗| www.1854.vip-官方彩票漏洞赚钱| www.8391.cn-七星彩三码定位|