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.56xe.com-118彩票真的吗| www.44838.com-中彩网怎么挣钱| www.97135.cc-足彩单关配什么意思| www.101141.com-彩运网是黑平台吗| www.208670.com-湖北快三今天推荐| www.300833.com-七乐彩预测号码分析| www.383207.com-彩票开奖19029| www.490009.com-快三九宫图-| www.566346.com-r8国际彩票靠谱吗| www.637058.com-谁有时时彩做号软件| www.718379.com-彩虹原唱在线试听| www.zm16.com-中彩3d网-| www.519689.com-世界各国彩票介绍| www.wl21.cc-玩彩是什么意思| www.831464.com-彩票网站接单| www.926394.com-武汉福彩店快3转让| www.996657.com-福彩幸运三开奖号| www.ij67.com-鸿鼎彩票app| www.15ln.com-彩虹6无人机参数| www.89pw.com-胜负彩推荐310| www.97610.com-彩票官方平台| www.619530.com-福彩3d术语解读| 500彩票www.330875.com| www.em09.com-网上500万彩票| www.89586.com-黄鹤楼迷彩-| www.205868.com-兼职刷彩金有危险吗| www.409989.com-舟山体彩飞鱼开奖| www.588405.com-七星2287特彩区| www.703996.com-竞彩序列号怎么兑奖| www.843422.com-姜山胜负彩冷门推荐| www.935657.com-安徽福彩彩票| www.999945.com-福彩排列3开奖号码| www.de19.com-江苏快三预测网| www.b11.xyz-最有信誉的私彩平台| www.41ww.com-彩票大乐透的软件| www.968976.com-彩神网高手论坛| www.qp13.cc-pc彩票到骗局| www.5861.xyz-江苏快三图片大全| www.88273.cc-吉彩宝官方下载苹果| www.192729.com-七星彩100期| www.200147.com-全国彩票开奖大厅| www.32917.com-支付宝怎样买彩票| www.001363.com-菲律宾彩票网上投注| www.1822.me-万彩彩票下载| www.702412.com-天下天空彩-| www.7481.pw-彩票自动售卖机代理| www.69537.cc-八马彩票线-| www.109251.com-567k彩票靠谱吗| www.yn53.com-快三有多少几率中奖| www.8737.in-我中啦彩票网双色球| www.158484.com-佬牛足彩解盘| www.510088.com-体育彩票哪个好| www.0099.vip-彩票有哪几类| www.301045.com-糖果派对彩金视频| www.46346.cc-买彩票提成多少| www.19975.cc-买彩票的微信名| www.69282.com-派彩电子走势图安装| www.yv64.com-云南省福彩-| www.121233.com-新西兰45秒彩| www.9056.org-北京7星彩-| www.53761.cc-客彩票-| www.578108.com-酷彩吧买彩合法吗| www.069342.com-彩神可以赚钱吗| www.099682.com-160彩票靠谱么| www.5362.org-彩票能在淘宝买吗| www.32ar.com-竞彩足球返奖率| www.4804.com-2006世界杯彩票| www.33470.com-福彩3d2007-| www.025002.com-彩票筛号软件| www.322112.com-快三软件预测| www.26724.com-七星彩奖金制度| www.932763.com-神圣彩票网址多少| www.706378.com-江苏快三靠什么挣钱| www.549066.com-普通彩票店胜负彩| www.854427.com-体彩星期三开什么奖| www.316.cm-一赔一的彩票| www.86929.cc-北京快三历史查询| www.647779.com-斐波那契数与彩票| www.002173.com-七乐彩奖项设置| www.095559.com-竞彩彩店宝-| www.239665.com-彩票软件风云榜| www.334320.com-上海快三推荐号码| www.657635.com-澳客体彩下载软件| www.755850.com-苹果手机贴彩膜| www.885295.com-萬城彩票-| www.977574.com-彩票截止购买时间| www.731622.com-彩票最佳网投平台| www.680879.com-澳門彩票-| www.3667.cm-昨晚彩票开奖| www.92171.cc-顺丰彩票平台怎么样| www.135610.com-送彩票活动案例| www.512037.com-画彩铅画简单好看| www.184447.com-新浪彩票网官网| www.0434.vip-彩吧助手缩水工具| www.0466.vip-79彩票app-| www.059145.com-利民彩票真能赚钱吗| www.081.cm-宝利彩票平台登录| www.3334.net-触手本子彩色本子库| www.364920.com-广西快三有漏洞吗| www.806814.com-竞彩足球计划表| www.985186.com-在线买竞彩竞猜软件| www.71658.com-购彩网安卓版下载| www.875772.com-恒彩88手机客户端| www.268064.com-500万彩票网购买| www.791447.com-彩票去哪里买| www.915286.com-淘彩网下载地址| 福彩www.86267hh.com| www.96896.cc-信阳体彩合买| www.8677.loan-福彩第一彩票开奖| www.4312.vip-篮彩神棍区手机版| www.345100.cc-0345大发彩票| www.0472.win-时时彩长龙提醒| www.601096.com-把所有彩票都买一次| www.060978.com-买彩票算不算犯法| www.625302.com-福利彩票机如何申请| www.zy10.com-怎么找彩票漏洞| www.482.in-彩票每日签到| www.6576.top-彩票坊网站-| www.33011.cc-苹果彩铅画-| www.035656.com-最经典的彩票宣传语| www.170064.com-大发快三骗局揭秘| www.861839.com-彩票店装修图片欣赏| www.947792.com-福彩什么-| www.fu97.com-河南快三购买技巧| www.5jn.com-福彩3d专家杀码村| www.07nd.com-七星彩番外-| www.69809.com-邯郸快三开奖结果| www.847505.com-合肥竞彩店的重要性| www.937213.com-五福彩票登录平台| www.993156.com-中国竞彩资讯网| www.025632.com-网络彩票代理赚钱吗| www.339767.com-竞彩无风险投注方案| www.407676.com-新大陆彩票走势| www.517287.com-福彩万能五码走势图| www.627105.com-青蛙开彩-| www.228967.com-新加坡好彩双爆珠| www.11048.com-盛典彩票下载| www.297195.com-山东彩民论坛| www.112922.com-腾讯分分彩预测工具| www.30np.com-极速分分彩官方开奖| 幸运众彩www.108129.com| www.hp88.com-彩票app哪个好用| www.ro71.com-彩票输了-| www.229181.com-快三助手ios| www.261010.com-江苏快三网址app| www.344638.com-彩票棋牌下载| www.173335.com-极速快三怎么看计划| www.272280.com-大乐透彩经网杀号| www.667888.com-博猫彩票改名| www.339379.com-生彩宝手机版下载| www.75308.com-彩吧图第二版| www.055778.com-福彩是要填几位数| www.040595.com-中彩双色球走势图| www.112808.com-竞彩网一定牛| www.187718.com-快三网址是多少| www.029081.com-唐龙聊彩-| www.156784.com-中福1分快三的网址| www.794339.com-春节后福彩开奖时间| www.952435.com-k彩线路测-| www.999076.com-彩乐汇官网-| www.bl2.cc-湖北快三随州| www.bc14.com-一定牛彩票软件| www.610954.com-华夏彩票怎么样| www.690922.com-盛典彩票下载|