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.811940.com-七星彩专家杀号定胆| www.230023.com-彩16手机官网| www.32161.com-易彩集团网站| www.67034.cc-买彩票中奖灵符| www.060092.com-彩票开奖是不是直播| www.153603.com-七乐彩复式价格| www.1839.com-今日大乐透彩民乐图| www.26785.cc-中彩票秘诀-| www.99313.cc-重庆时时彩赔付规则| www.152586.com-uu快三代理-| www.545766.com-福利彩票去哪里申请| www.670562.com-彩色照片是什么颜色| www.750772.com-网上说破解彩票平台| www.838413.com-竞彩大小盘-| www.21ut.com-七星彩下期杀号预测| www.16700.com-竞彩资讯竞彩网| www.41bi.com-国庆节彩票站放假吗| www.537935.com-天然彩色石子| www.336826.com-沈阳福彩中心地图| www.989337.com-万彩吧苹果版本下载| www.103725.com-中福彩官网-| www.170170.com-河北快三今天推荐号| www.811945.com-新昌县双彩乡下岩村| www.908107.com-守七星彩领奖视频| www.976380.com-体彩宝石之王中奖率| www.69be.com-亿元中奖彩票| www.2388.top-福彩3d专家晒票| www.8042.biz-陈飞虎水彩写生视频| www.81bu.com-乐彩论坛排317| www.140810.com-福彩刮刮乐兑奖流程| www.290335.com-彩经网排列五走势图| www.rr1.cc-快三彩票的玩法| www.no68.com-宁夏福利彩票中奖| www.973924.com-下载500万彩票网| www.91437.com-绿好彩爆一条| www.53ba.com-全牛彩票-| www.6289.biz-新湖北竞彩快三| www.74418.com-体育彩票排列五规则| www.5505.bid-雨后彩虹说说| www.82324.com-彩票表格模板| www.626022.com-彩票猜大小单双窍门| www.782799.com-云南十一选五爱彩乐| www.941757.com-广西体育彩票中心| 福彩www.16878z.com| www.989771.com-彩票开奖查询票开奖| www.101850.com-彩票平台出租可靠么| www.i50.pw-彩娃彩票官网| www.42ie.com-唯彩会买彩票| www.465.tv-喜欢彩票-| www.721387.com-在哪买足彩篮彩| www.cp7782.com-体彩大乐透走势| www.om51.com-福彩走势图综合版| www.18xl.com-七乐彩五等奖| www.362613.com-彩虹周杰伦歌词简谱| www.727650.com-体彩小将去哪里兑奖| www.51lh.cc-360彩票网是骗人| www.0310.cc-福利彩票中奖算法| www.gi77.com-彩票守号-| www.391375.com-3d新彩网无名图米| www.692920.com-彩票乐乐官网| www.840709.com-澳客竟彩足球| 彩票5www.550304.com| www.xc17.com-福彩排列七奖金| www.91bx.com-辉煌彩票能赚钱吗| www.772462.com-体彩排三魔图图片| www.961723.com-福彩3d中奖图| www.36628.com-博彩平台制作公司| www.043213.com-七星彩票a-| www.158779.com-启航团队买彩票骗局| www.kh.cc-乐米彩票app| www.131740.com-采彩票开-| www.582698.com-全球彩票靠谱吗| www.762525.com-北京福彩官网快3| www.865963.com-有救济金的彩票软件| www.959086.com-彩票99安卓版下载| www.bt9.cc-快三一定牛推荐| www.828084.com-盗窃彩票怎么定性| www.8jd.cc-开心网彩票论坛| www.395343.com-彩虹岛稀有装备大全| www.5633.com-体彩如何网上兑奖| www.279508.com-彩500下载网址| www.157098.com-传统五分彩-| www.102189.com-8888彩票合法吗| www.687668.com-彩票平刷教程| www.547246.com-足球彩票最新开奖| www.665781.com-彩宝彩票注册| www.816134.com-买外围彩票犯法吗| www.963940.com-qq彩票是正规的吗| www.r65.cn-上海福利彩票快彩| www.73249.com-49.cc金彩网站| www.9388.com-时时彩登陆-| www.491717.com-送彩金的游戏网站| www.603385.com-彩票开奖二六选五| www.781924.com-彩票软件源码排行榜| www.332361.com-十选五彩票玩法| www.841277.com-中国足彩比分直播网| 大赢家彩票平台www.507285.com| www.615315.com-福彩3d前后顺序| www.0237.top-竞彩混合足球| www.949949.com-领先彩票-| www.995500.com-竞彩之家寄居蟹注册| www.cd90.com-最新江苏快三下载| www.503320.com-哪个彩票网送彩金| www.116952.com-500w彩票-| www.205591.com-网上黑彩平台| www.171234.com-体彩排列五开奖结果| www.308646.com-大乐购彩票怎么玩| www.391229.com-下载星彩网-| www.35075.com-金彩网快三技巧| www.004843.com-黑龙江快三浩彩快三| www.130696.com-一定牛彩票网址地址| www.281528.com-中国福利彩票兑奖号| www.6149.cc-淘金彩票app| www.563061.com-吉祥彩网站-| www.223862.com-竞彩网分直播| www.vf03.com-彩票软件网站排行榜| www.745177.com-六禾彩开奖结果记录| www.875514.com-安徽快三数据| www.977305.com-吉利彩票登陆| www.bs42.com-今日彩票官网地址| www.yn69.com-体彩七位数难中吗| www.02053.com-至尊彩霸-| www.540244.com-福彩中奖号码双色球| www.950115.com-一定牛彩票能提现吗| www.fz68.cc-河北省福彩排列7| www.6gg.cc-瑞祥祥云彩票可靠吗| www.26676.com-快赢彩票网址| www.90260.com-七彩图片大全| www.417.in-投高频彩-| www.997077.com-福彩图迷字迷猜数字| www.137341.com-六开彩软件下载| www.2067.in-旺彩社区彩迷天地| www.693226.com-彩宝彩票规律| www.806140.com-99彩票是真的假的| www.893907.com-爱投彩票ios| www.967441.com-云南福彩3d高手群| 双彩网www.639012.com| www.zr39.com-老盘足彩胜负分析| www.680613.com-彩网彩吧-| www.789197.com-竞彩足球胜平负| www.459472.com-重庆约彩彩票| www.855037.com-快乐双彩玩法| www.607795.com-亚洲杯竞彩预测| www.gp.com-038彩票计划| www.758924.com-bbin彩票刷水| www.827227.com-富豪彩票-| www.887579.com-106官方彩票网| www.968411.com-澳洲时时彩开奖查询| www.q09.cn-利盈彩票-| www.2047.vip-彩票k8网-| www.95095.cc-精准彩票数据库软件| www.725700.cc-彩票兑奖有效期多久| www.801537.com-宝马1彩票-| www.860746.com-快三2同号-| www.905083.com-苏州彩票店转让信息| www.964112.com-体育彩票投资技巧| 乐彩www.lczg9.com| www.cw36.com-幸运快三每天多少期| www.sy59.com-生肖彩票哪里买| www.50qk.com-彩票选号大成| www.390925.com-注册福利彩票账号| www.709998.cc-彩神论坛超准15码| www.835813.com-好彩三八是什么肖| www.98226.com-分分开奖彩票可信吗|