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.569087.com-送彩票做促销合法吗| www.766747.com-禁止网络买彩票| www.871593.com-利彩安全下载| www.945800.com-福建体彩大乐透| 全民乐彩票www.2934y.com| www.es58.com-立彩彩票的骗局揭秘| www.5qh.com-昨天竟彩开奖结果| www.0411.date-彩票帮助赢软件| www.9505.cm-腾讯十分彩计划| www.366338.com-福利彩票23期| www.20vy.com-彩票从哪里买正规| www.6967.xyz-杏彩彩票官方网站| www.670835.com-彩绳编发七彩色| www.22172.com-足彩单关比分走势图| www.86974.com-福彩3d李白胆码| www.889052.com-足彩受让是什么意思| www.459458.com-想中福利彩票翻身| www.618562.com-w彩票-| www.042647.com-多彩贵州网董事长| www.751794.com-中彩网双色球推荐号| www.882880.com-宏达彩票靠谱吗| www.991414.com-买七星彩技巧| www.jg61.com-万家彩票官方首页| www.53nf.com-体彩吧彩票资料大全| www.871584.com-利彩彩票平台| www.954624.com-国外彩票有哪些| 聚彩网www.757209.com| www.662308.com-做时时彩代理判多久| www.751251.com-体彩足彩多少钱领奖| www.827018.com-彩管家最新版本下载| www.914499.com-网上彩票有什么漏洞| 三星娱乐www.sxyl8.com| www.0118.org-彩票如何看小黑点| www.um20.com-内蒙古福彩中心k3| www.32nx.com-实亿彩票平台可靠吗| www.0434.org-安徽快三号码| www.6291.xyz-福彩幸运彩票选号器| www.0725.org-澳客赢家彩票可靠吗| www.8900.in-七彩乐开奖-| www.120178.com-在线彩票投注靠谱吗| www.206731.com-大发彩票网站合法吗| www.021462.com-彩吧全图3d图谜| www.090756.com-go彩票官网-| www.86350.com-七星彩买奖网址| www.060708.com-红宇体彩店下载| www.139535.com-盈彩五分快三| www.218226.com-重庆福利彩票| www.288652.com-彩票屠龙是怎么回事| www.949182.com-七星彩走势-| www.db64.cc-彩神大发是真的吗| www.vp72.com-湖北快三杀号专家| www.ea71.com-吉林快三靠谱平台| www.3991.xyz-沙巴博彩公司| www.211165.com-彩神五星独胆| www.365129.cc-彩天堂-| www.915268.com-博盈彩票-| www.997171.com-中彩网网址登录| www.so40.com-彩霸王料-| www.di76.com-安徽体彩票十一选五| www.70606.com-内蒙福彩快三玩法| www.0538.org-牛彩纽约登录| www.26116.com-彩乐汇是真的假的| www.592139.com-七星彩总部-| www.355352.com-智博彩票网的网址| www.969598.com-蒙古快三走势分析图| www.96js.cc-易博彩票平台| www.16873.cc-正投彩票大发快三| www.079168.com-12生肖彩票软件| www.176138.com-福彩3d死规律| www.3346.in-彩票有走势吗| www.705323.com-福利彩票能买大乐透| www.179510.com-群里有人带玩快三| www.7395.top-哈尔滨市彩票站出兑| www.39162.cc-中彩彩票怎么推下级| www.756007.com-中国福彩彩票| www.1293.in-苹果彩票网北京赛车| www.802266.com-精彩视频在线观看| www.897191.com-国外有没有五分彩票| www.90249.com-七彩网是真的吗| www.397016.com-用手机买张彩票| www.556639.com-彩票中奖怎么兑奖的| www.159081.com-机选一注七星彩号码| www.261732.com-彩票导航走势图| www.336331.com-万达彩票娱乐| www.26839.cc-七星彩怎样看规律| www.001785.com-七乐彩复式计算表| www.795669.com-新加坡天天彩网| www.892391.com-彩票榜安卓-| www.978715.com-好彩客安卓版下载| www.57225.com-立彩软件苹果| www.336910.com-江苏快三走遗漏| www.856129.com-投注广西快三| www.1853.live-高频彩微信骗局手段| www.266844.com-快三图表福彩快3| www.982938.com-牛牛赌博彩票| www.bo17.cc-吉林快三开奖下载| www.sy30.cc-2015够力七星彩| www.29120.com-河北彩票兑奖中心| www.33pp.com-章鱼彩票安卓| www.98072.com-排列三试机号彩票| www.228861.com-下一期好彩1预测| www.651495.com-稳赚不赔的玩彩方法| www.712223.com-时时彩五星缩水软件| www.781655.com-代办彩票店-| www.851020.com-分分彩技巧玩法介绍| www.902512.com-亚朵网国彩票合法吗| www.957731.com-228乐透彩-| 彩乐乐www.cll168.com| www.967354.com-快三万能码使用技巧| www.4pm.com-怎样看彩票是否中奖| www.604892.com-体彩任选三单式奖金| www.774387.com-体彩七星彩购买规则| www.954414.com-浙江彩票网12选5| 乐彩网www.566897.com| www.59681.com-极速3d彩票漏洞| www.133418.com-江苏快三开奖列表| www.14ra.com-咸阳立彩公司| www.008239.com-福彩七乐彩几点开奖| www.225424.com-彩票计划群被骗| www.269575.com-大小单双彩票app| www.382058.com-买彩票中奖还帐| www.562132.com-买快三三倍赚翻了| www.485904.com-飞彩app-| www.950910.com-大乐透彩票奖金| 易盈彩票www.7793aa.com| www.is99.com-竞彩网篮球开奖| www.rz00.com-彩票256安卓| www.34395.com-中国体育彩票彩下载| www.98710.com-足彩几串几什么意思| www.924015.com-世界彩票大奖排名| www.995016.com-快三哪里开奖最快| www.dn45.cc-中彩票要交多少税| www.d80.cc-九宫图与彩票| www.647696.com-智胜彩票下载| www.085398.com-01彩票苹果版下载| www.996184.com-足彩单场竞猜比分| www.mg37.com-外国彩票软件| www.29uz.com-彩铅画教程简单好看| www.0088.tm-手机下载福利彩票网| www.841145.com-福彩3d055期| www.942123.com-青诲快三查询图| www.983184.com-公务员可以买彩票吗| www.4261.cm-香港好彩免费资料网| www.60435.com-凤凰彩票提现手续费| www.89lj.com-衣服用彩漂泡一夜| www.199808.com-河北福彩三-| www.031533.com-038彩票破解| www.311825.com-福彩3d报纸图今天| www.326529.com-彩八万app-| www.vr85.com-海南七彩奖开奖结果| www.23gb.com-去彩票站app下载| www.128776.com-彩票七乐彩4加1| www.199513.com-五分⑥和彩开奖网站| www.085756.com-彩神uv打印机| www.159081.com-机选一注七星彩号码| www.972302.com-天玺彩票注册| www.cw13.com-七星彩私彩网投注站| www.j14.xyz-电子游艺绑定送彩金| www.50uq.com-手机淘宝彩票不能买| www.2016.shop-跟彩-| www.3156.xyz-玩彩赚钱-| www.787872.com-158彩票在线| www.855800.cc-七乐彩中3个号| www.903372.com-万豪彩票ios|