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天

知道了
江苏11选5 www.22929.cc-彩神通计划资料软件| www.714153.com-国彩app推荐几款| www.525613.com-中国竞彩体育网| www.i30.top-彩投彩票网-| www.619406.com-3d彩票攻略-| www.013311.com-开开心心彩票网| www.129450.com-彩运来登录网址| www.223776.com-福建体育彩票官网| www.301898.com-湖北快三今日开| www.082572.com-彩色透水混凝土价格| www.176410.com-福彩3d试机号金码| www.389752.com-体彩实体店厂家优惠| www.34me.com-本期七星彩开奖直播| www.1766.cc-万彩影像大师| www.135665.com-中国体育彩票装修| www.128950.com-七乐彩现在游戏规则| www.223087.com-分分快三会造假吗| www.127842.com-美女套路买彩票| www.98hh.com-体彩排列五分析软件| www.483763.com-网络彩票拉下级| www.151852.com-汇彩网怎么样| www.258909.com-竞彩单场推荐总汇| www.086299.com-福利彩票快三和值图| www.7650.in-双色球彩票是多宽| www.607999.com-中国体彩加盟条件| www.796156.com-彩票工具历史比较| www.3522.cc-网站353微彩| www.67129.com-支付宝不能换彩票了| www.032244.com-cc彩球网国际平台| www.119206.com-江苏快三中奖口诀| www.9739.pw-时时盈彩-| www.727613.com-彩易彩票-| www.890162.com-彩名堂计划怎么下载| www.8280.biz-体育彩票电话| www.825790.com-彩票中三个号有钱吗| www.895396.com-华彩赢家是不是传销| www.967569.com-体彩大乐透选号| www.vf16.com-快三二同号规律| www.13872.com-鸿运彩票跟投怎么样| www.mo76.com-足球彩票指南| www.09an.com-体彩中心网站| www.1061.wang-大发快三怎么玩能赢| www.13068.com-竞彩数据软件哪个好| www.60052.cc-福彩3d快乐十分钟| www.531395.com-彩票买多少钱| www.110458.com-重庆时时彩9码计划| www.139452.com-河北福彩下载安装| www.077156.com-新彩网3d字谜| www.295448.com-彩吧图谜全图| www.550913.com-彩站app下载| www.675518.com-时时彩不连挂计划| www.87827.cc-福彩3d杀码彩易网| www.246229.com-大发福彩快3| www.377003.com-埃及五分彩官方开奖| www.76893.com-彩金狮王游戏机| www.047970.com-江苏体彩网官方首页| www.679026.com-正规足彩官网| www.860240.com-彩61平台下载| www.923937.com-appcp彩票软件| 网易彩票www.26163f.com| www.5028.vip-吉祥彩怎么注册| www.234333.cc-微信快乐彩能追回吗| www.322861.com-彩计划下载-| www.433246.com-彩虹堂手机版下载| www.020158.com-四川体彩管理中心| www.089255.com-618彩票-| www.041498.com-爱尔兰彩票最高奖金| www.177202.com-快三助手最新版| www.281724.com-七乐彩绝杀-| www.384178.com-中国福利彩票贪污案| www.040639.com-博彩360彩票导航| www.155027.com-竞彩单关图-| www.025610.com-57607和乐彩票| www.651080.com-水彩3d画教程简单| www.965957.com-马会彩经一码书下载| 幸运彩票www.551030.com| www.gz16.com-盈彩网真的能赚钱么| www.369834.com-竞彩封盘早-| www.03005.cc-体彩彩票店害人| www.mb26.com-快三官方下载| www.32032.cc-能提现的彩票软件| www.246851.com-五百万彩票网下载| www.6698.in-彩票开奖查询全部| www.936316.com-体彩自助刮刮乐机器| 福利彩票www.99677s.com| www.4157.xyz-彩虹剧情分集介绍| www.586823.com-彩吧论坛手机版| www.875324.com-双色球中奖彩票故事| www.952949.com-好彩1数据遗漏图| www.hh36.com-uu快三在线计划| www.87.gg-彩票开机号查询| www.790615.com-3d福彩太湖-| www.875021.com-三地彩吧图库第二版| www.967232.com-体彩排列五选号法| www.yh61.cc-甘肃快三和值跨度| www.66sq.com-太原福彩店转让| www.1685.net-排三乐彩网字谜图迷| www.el73.com-彩吧论坛一首页| www.234358.com-怎么才能戒彩票| www.292708.com-人人彩票靠谱吗| www.345747.cc-在彩票站适合卖什么| www.396237.com-彩票交税计算器| www.981620.com-快三手机版下载| www.c89.net-百宝彩账号怎么申请| www.ds20.com-快三线上-| 500万彩票www.39500z.com| www.vo36.com-中国体彩电脑版首页| www.56an.com-彩票神算王推荐号| www.0168.top-抽奖与彩票-| www.5093.com-彩票幽默笑话| www.4587.cn-699彩票靠谱吗| www.183852.com-福彩快三复式表| www.024617.com-彩神通有手机版的吗| 大赢家彩票平台www.926013.com| www.385119.com-怎么分彩票大透| www.65mx.com-佰万彩票官网| www.6949.xyz-时彩技巧-| www.76016.com-山东体彩客户端下载| www.050701.com-36o彩票全国开奖| www.191392.com-福彩3d藏机图| www.302788.com-彩票921下载| www.560668.com-什么是澳洲三分彩| www.728258.com-体彩排列5直播现场| www.431183.com-腾龙时时彩在线做号| www.03hr.com-蓝精灵3d彩报a| www.542.me-095彩票网-| www.130943.com-江西彩礼为什么高| www.780568.com-彩铅画漫画人物女孩| www.004913.com-彩神vll下载链接| www.f12.net-乐彩网是属于赌博吗| www.54yr.com-贵州体彩站怎么申办| www.0467.wang-钻石彩票软件下载| www.5sk.cc-欧洲彩票交税多少| www.61er.com-赌彩网站信誉排名| www.0741.org-新浪网彩票开奖公告| www.08913.com-福利彩票关注公众号| www.464625.com-六开彩什么玩| www.698543.com-温州福彩征召| www.284944.com-最新快彩中奖助手| www.x17.cc-248彩票真害人| www.39hx.com-嘉兴福彩双色中心| www.010.website彩票世界网址| www.707667.com-时时彩总和大小判断| www.172664.com-内蒙古快三开奖结| www.ud16.com-0365cc彩票-| www.04583.com-那个app能买足彩| www.676938.com-彩色的包装袋机器| www.755257.com-中彩网不能出款| www.821889.com-5星大底彩票伴侣| www.889397.com-神彩福牛双色球网址| www.954310.com-重庆老时时彩下载| www.ny0.cc-大发快三提前开奖器| www.043866.com-快三今日开奖号码| www.206762.com-聚宝彩票是真的吗| www.hf10.com-快三开奖所有号码| www.739617.com-福彩3d图纸今天的| www.732367.com-许昌彩礼2017| www.920620.com-网络快三计划软件| 豪彩VIPwww.718568.com| www.768308.com-幸运彩票安卓版下载| www.855560.com-林兴洛福彩3d| www.925023.com-福彩3d一点通| www.972193.com-福彩3d跨度遗漏| 500万彩票www.39500d.com|