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天

知道了
彩01彩票 www.140551.com-苏州快三线路| www.219043.com-百姓彩票网介绍| www.130924.com-有彩礼没嫁妆丢人不| www.8624.vip-我中了彩票网| www.484700.com-福州彩票中奖| www.830321.com-彩票软件提供| www.739858.com-胜利彩票下载| www.812995.com-手机彩票网投领导者| www.908328.com-彩票信息源码| www.kv60.com-体彩和福彩-| www.22.xyz-足彩独赢-| www.776557.com-时时彩四星万能大底| www.969002.com-福彩3d胆码定位| www.pe.cc-体彩是赌博吗| www.171167.com-体彩排列五开奖| www.025232.com-江西快三江西快三| www.367068.com-可以购彩票软件下载| www.495706.com-谨慎博彩公司| www.578674.com-3q彩票下载-| www.674527.cc-足彩胜负彩中奖计算| www.759505.com-运盛彩票提现| www.844583.com-中奖彩票支票| www.911549.com-家彩论坛千禧试机号| www.979254.com-好彩香烟双爆珠买| www.vv1.com-福彩快三怎么开奖呢| www.388547.com-网易彩票辅助器| www.464178.com-七星彩预侧安然| www.706031.com-中国体育彩票网下载| www.261320.com-极速时时彩开奖| 日彩网www.rcw678.com| www.325644.com-大乐透免费预测彩经| www.520718.com-分分彩后三稳杀2码| www.994006.com-nba竞彩推荐| www.gv95.com-盈彩网揭秘在线| www.n26.site-南方双彩网电脑版| www.49bs.com-七彩吞天蟒图片| www.79747.com-体彩大乐透技巧口诀| www.348940.com-合肥福彩店出租转让| www.lp2.cc-内蒙快三新规则| www.14zn.com-幸运彩qq群-| www.071.in-下载中国体彩票| www.4910.vip-竞彩5258官网| www.447994.com-现在微信哪买彩票嘛| www.858635.com-今天福彩3d中奖号| www.937377.com-彩福大厦-| www.996423.com-黑龙江体彩领奖地址| www.ql11.com-一定牛彩票停售| www.939621.com-重时彩开奖结果| www.yd22.com-大发快三可以作假吗| www.233650.com-彩乐汇是骗局揭秘| www.551189.com-彩王软件-| www.373062.com-体育彩票刮刮卡尺寸| www.523425.com-福彩网免费资料大全| www.604690.com-齐发网彩票-| www.156876.com-zf开头的彩票网址| www.153109.com-时时彩四胆10中九| www.610298.com-久久彩票怎么了样| www.23349.com-app500彩票-| www.163003.com-福利彩票图大全九| www.766.online-彩民之家图彩新图| www.745020.com-大赢家彩票网址多少| www.826770.com-京东彩票在哪里兑奖| www.970964.com-体彩票号几种| www.in5.com-上海福彩吋时乐| www.xg22.com-福彩双色球奖项设置| www.41dv.com-体育足彩aop| www.126557.com-湖北万彩票网| www.863250.com-高频彩票数字原理| www.880108.com-彩运彩票网官方网站| www.954763.com-彩福是不是正规平台| www.cp30.com-广西快三开奖遇漏| www.50520.com-时时彩高概率不倍投| www.19786.cc-彩票没中奖-| www.098991.com-福利彩票旗下传统彩| www.61787.cc-特特区七星彩论坛| www.985508.com-安微省福彩快三| www.85438.com-福利彩票试机号| www.231038.com-青岛有快三彩票吗| www.yg96.com-腾讯分分彩胆码技巧| www.gg71.com-大发快三是合法的吗| www.wg66.cc-手机新浪网彩票频道| www.03xh.com-玩快三跳楼-| www.21969.com-天天福彩真的假的| www.23vr.com-牛彩网彩票网站| www.qc19.com-577彩票官网| www.030805.com-106cm彩票-| www.305902.com-彩票电脑版-| www.501520.com-彩客网比方直播| www.583848.com-彩之乐彩票网app| www.732916.com-江苏省彩票兑奖地点| www.849298.com-运盛彩票网站| www.963531.com-手机彩票代购平台| www.bt59.com-快三注册平台下载| www.954537.com-牛蛙彩票开奖历史| www.cai2399.com皖快三走势图| www.lw09.com-时时彩牛牛玩法介绍| www.g50.cc-福彩3d软件哪个好| www.32ja.com-下载贵州多彩宝交费| www.152.cc-神州五分彩开奖结果| www.3136.vip-七星彩解码-| www.96549.com-台湾彩票参考资料| www.th55.cc-体彩时时彩玩法规则| www.868865.com-七星彩软件哪个最好| www.50725.com-彩票900万-| www.095161.com-外围足彩-| www.228898.com-分分快三免费计划| www.886786.com-大大彩票可靠吗| www.85050.com-七星彩18144| www.78em.com-银川彩票659万| www.678564.com-彩之网开奖结果| www.724201.com-微彩属于赌博| www.ug86.com-彩宝彩票app| www.58455.cc-8号彩票赚钱| www.080738.com-乐发彩票注册| www.10017.com-快三是彩票-| www.428702.com-强力巨彩害死人| www.qg86.com-好彩白1871-| www.cp5787.com-手机买彩票怎么买| www.38153.com-贵阳福利彩票总公司| www.82820.cc-搜狐彩票合法吗| www.029230.com-19042期胜负彩| www.500105.com-幸运彩跑马投注技巧| www.569026.com-福彩宝坑吗-| www.466419.com-越南6位数彩票开奖| www.ip88.cc-足球彩票推荐| www.71nr.com-足彩14场胜负玩法| www.692937.com-竞彩已完场比分结果| www.53981.cc-彩票开奖快乐双彩| www.126653.com-印尼时时彩官网| www.199853.com-黑龙江彩票十一选五| www.9232.biz-乐彩网彩票安全吗| www.37981.com-棒棒彩票大发计划网| www.78299.cc-河北快三牛人推荐| www.3976.cc-球赛竞彩app| www.9262.biz-体育彩票基本走势图| www.65665.com-南方双彩嘻嘻3d| www.ux47.com-q彩网正规吗| www.0318.live-体彩怎么过户| www.xl59.com-福彩青海快三走势| www.187781.com-7星彩怎么才算中奖| www.265179.com-彩票3d领袖贴吧| www.354342.com-优亿市场彩票| www.429058.com-福利彩票青蛙过河| www.514688.com-澳洲lotto彩票| www.603959.com-5258彩票平台| www.679983.com-内蒙古时时彩网站| www.747408.com-彩票提现到支付宝| www.806989.com-七号彩票注册邀请码| www.34ln.com-甘肃福彩联系电话| www.791254.com-双色球预测牛彩| www.869702.com-唯彩会开奖大厅| www.947656.com-福彩格式-| 网易彩票www.36788y.com| www.805399.com-分分彩输了几十万| www.543296.com-大家乐彩票官方下载| www.8820.loan-飞鱼彩票走势图大全| www.71270.com-大乐透彩票500| www.182222.com-彩票兑奖地点| www.282122.com-附近体彩店-| www.536070.com-买彩票一共多少数字| www.677591.com-章鱼彩票下载安装| www.343100.com-神彩福牛官方网| www.983370.com-天音,福彩,基诺| www.mf7.com-甘肃快三今日遗漏|