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.306.cn-彩票中奖官司| www.978742.com-畅玩彩票-| www.ch74.com-一分快三点数怎么赢| www.29.cx-福利彩票快3怎么打| www.71wp.com-如何看体彩走势图| www.5644.vip-体彩排列五技巧| www.16226.cc-上海福彩双色球开奖| www.58767.cc-七星彩粟开奖结果| www.265798.com-e球彩玩法介绍| www.357236.com-彩票近期中大奖人| www.456645.com-体彩兑奖处怎么样| www.17hi.com-彩民商城-| www.743342.com-金山彩票手机版| www.976340.com-云南福彩票-| www.ve.cc-快三线上投注平台| www.857489.com-中华彩票网优酷视频| www.978540.com-8亿彩苹果版下载| www.rj27.com-北京快中彩当前奖池| www.62xy.com-体彩你中奖是真的吗| www.4650.win-彩票买多少钱合适| www.78802.com-福彩3d定五码技巧| www.055545.com-福利彩大发快三| www.151014.com-三d开奖结果彩助手| www.273483.com-福彩中心在哪| www.363236.com-福利公益彩票网| www.460079.com-彩票机图片扑克娱乐| www.555040.com-中彩票了1个亿| www.630551.com-3d彩吧彩报第三版| www.715448.com-网页版彩神-| www.799906.com-搜狐彩票开奖查询| www.029112.com-乐彩vip专业版| www.277866.com-山东体彩排列3论坛| www.365733.cc-兰州彩票中奖最近| www.456769.com-彩票图库大全| www.544434.com-彩票平台中大奖| www.615602.com-体彩7位数分析技巧| www.690380.com-足彩比分最牛中奖单| www.775032.com-彩票平台骗局视频| www.863142.com-智慧彩挂机下载| www.937291.com-下载云彩厅-| 大钱庄彩票www.c5986.com| www.982457.com-鸿运来彩票是正规吗| www.ks41.com-山东体彩网论坛| www.z03.cc-昨晚福彩中奖号码是| www.54sn.com-申请福利彩票销售| www.700989.com-快三假彩票诈骗案例| www.231808.com-江苏快三最稳的计划| www.355846.com-日本七亿彩票| www.525297.com-10分快3彩票计划| www.680063.com-好彩票专业版安卓| www.806039.com-彩票招财-| www.931024.com-彩票体彩开奖大乐透| 中彩网www.700345.com| www.vd18.com-江苏省福彩3d结果| www.32kh.com-彩票开奖双色球周五| www.6092.biz-江苏快三销量| www.30207.com-3d开奖南方双彩网| www.87379.com-933彩票是骗局吗| www.062963.com-金湖体彩-| www.136170.com-江苏省福彩在哪里| www.220379.com-体彩排列三独胆推荐| www.307678.com-派彩每日推荐号码| www.388330.com-福彩3地历史遗漏| www.508977.com-万利彩票下载手机版| www.054.date-北京福彩如何兑奖| www.22284.cc-彩虹世界app官网| www.027332.com-彩吧论坛手机天齐网| www.175717.com-快三中奖助手苹果版| www.341806.com-福彩3d牛彩冈图迷| www.562546.com-外围彩票网站合法吗| www.781211.com-儿童彩虹画图片| www.890529.com-坤彩集团-| 六福彩票www.66fft.com| www.30ar.com-手绘动漫人物彩铅画| www.50100.cc-各釉彩大瓶赏析| www.115022.com-彩神通专业版| www.cai4567.cc-快三一定牛-| www.914958.com-优彩骗局-| www.mk27.com-网络十大平台彩票| www.962501.com-深圳福彩官网首页| www.806709.com-腾讯分分彩简介| www.310217.com-今日快三中奖规律| www.378235.com-体彩每晚几点开奖| www.324323.com-马来西亚网上博彩| www.505248.com-39彩票老品牌| www.659189.com-七乐彩3拖9-| www.6717.in-香港6和合开彩结果| www.094303.com-三彩彩票官方| www.cai5505.com甘肃快三形态走势| www.02jm.com-彩票开奖安征快三| www.xd.com-福利彩票甘肃快3| www.pr81.com-体彩关爱留守儿童| www.41369.com-网上福彩诈骗| www.181589.com-好彩江苏快三靠谱吗| www.7794.vip-梦见选彩票-| www.262619.com-河北快三跨走势图| www.512339.com-669彩票下载| www.627575.com-福彩双彩网-| www.699238.cc-中国福彩怎么玩| www.876276.com-彩票中奖去哪里兑奖| www.001726.com-288彩吧-| www.68250.cc-北京快三成控| www.199841.com-上海快三最大遗漏| www.501255.com-迷彩虎讲堂下载| www.iu76.com-足球彩票软件下载| www.957442.com-山东福彩3d交流区| www.58352.cc-彩20官网-| www.103736.com-乐彩网余款可以提现| www.193231.com-乐和彩开奖结果| www.389968.com-大乐透彩票开奖规则| www.955295.com-500彩票必中神器| www.vx11.com-七星彩走势图彩宝贝| www.395165.com-彩虹秒赞网源码| www.33631.com-环球彩票平台登录| www.506282.com-福彩3d社区777| www.892062.com-快彩分析软件| www.254944.com-分分时时彩人工计划| www.678262.com-特彩把旧原版| www.987323.com-福彩大赢家走势图| www.39cc.com-吉林快三几号停| www.216170.com-彩票人工计划网| www.20nx.com-河北体彩排列五| www.00951.com-彩票开奖采集接口| www.189088.com-彩票收集网-| www.829088.cc-站点微信购买彩票| www.6734.cn-手机app彩票苹果| www.4761.vip-彩票中奖询查| www.299172.com-豪彩vlp-| www.1al.com-彩票工具计算器| www.744281.com-华人彩-| www.840512.com-体育彩票中奖去哪领| www.933305.com-中福快三一分钟彩票| www.855727.com-福彩3d复试玩法| www.989204.com-彩票大同平台登录| www.ex70.com-中国彩票开奖查询| www.125755.com-体彩排3开奖号| www.418525.com-中博国际是正规彩票| 幸运彩票网www.33598l.com| www.4325.vip-最新鑫彩网app| www.uj90.com-彩虹代表的含义| www.885608.com-牛彩彩票app下载| www.9185.net-时时3分彩开奖记录| www.680671.com-中彩彩票中福快三| www.356569.com-河南快三几分钟一期| www.258826.com-胜负彩500足彩| www.728944.com-重庆快三怎么玩稳赚| www.858501.com-六开彩即时开奖下载| www.011897.com-福彩中心周日上班么| www.365.shop-我爱彩票注册| www.02971.com-体彩宁夏11选5| www.719407.com-福彩排列5今天开奖| www.720896.com-彩票两元网app| www.851738.com-时时彩计算胆码软件| www.350155.com-绝望买彩票-| www.367108.com-怎样用彩铅画星空图| www.gu7.cc-百盈快三计划软件| www.32dq.com-简笔画彩虹-| www.458999.cc-nba体彩怎么买法| www.884156.com-快三pk10计划| www.ir21.com-1分快三开奖| www.93583.com-手机买快三能赢吗| www.215631.com-内蒙快三初几开奖| www.br70.com-彩票走势图分析软件| www.sh77.cc-五分时时彩开奖信息|