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天

知道了
58福彩 www.107587.com-体育彩票销量排行| www.40916.com-云顶博彩-| www.029039.com-彩神8真假-| www.875160.com-酷彩吧下载地址| www.165266.com-赠送礼金的彩票| www.121357.com-买彩票导师-| www.378056.com-7彩阳光信站开始| www.728058.com-亿彩网正规吗| www.715401.com-四季彩登录平台| www.279635.com-把高频彩当职业| www.389121.com-乐彩字谜图谜论坛| www.153699.com-澳客竟彩网-| www.315855.com-彩虹e台6位分享码| www.665500.com-七色彩虹糖图片| www.752777.com-彩票首存送平台| www.73803.com-管家婆彩图大全| www.007747.com-新宝彩票6-| www.137802.com-毕节彩民中奖| www.223786.com-体彩app停售| www.iv73.com-竞彩混合投注| www.07wc.com-彩钢压型板-| www.0629.net-下载新淘彩-| www.8237.bid-今天江西快三走势图| www.49825.cc-摩羯足彩预测app| www.174898.com-彩票软件快三| www.311345.com-一分钟极速快三技巧| www.005405.com-内部人士彩票骗局| www.863923.com-159发发发彩票| www.85363.com-湖北快三遗漏表| www.82187.com-彩77平台怎么样| www.lu31.com-好彩36开奖查询| www.10fv.com-999彩票网靠谱吗| www.329895.com-旺彩双色球彩票软件| www.105181.com-手机购彩软件合法吗| www.786836.com-极速3分彩开奖结果| www.035983.com-关于彩票爱情的句子| www.140300.com-七星彩808pc| www.245033.com-胜负彩新浪-| www.627468.com-乐迷彩-| www.761234.cc-德州好彩快三平台| www.934283.com-智博彩票是真的假的| www.mr00.com-重庆时时彩几点结束| www.x88.com-福利彩票81期| www.59ro.com-体育彩票放开| www.wz20.com-大乐透走势图彩经网| www.97ia.com-排练和彩排-| www.137674.com-体育彩票快3直播| www.258905.com-皇冠竞彩软件| www.71664.com-福彩3d是每天开吗| www.103840.com-极速快车彩票| www.198531.com-开奖结果大发快三| www.242606.com-7168彩票网-| www.0460.cn-彩8彩票客服电话| www.306525.com-福利最好的彩票平台| www.226690.com-彩库宝典下载| www.967098.com-体彩31选七走势图| www.456122.com-彩六进攻3速| www.668075.com-tt彩票正规吗| www.718231.com-老北京赛车是官方彩| www.090007.com-亚博篮球彩票规则| www.kj.com-彩票选号助手软件| www.460.in-财神彩票网址是多少| www.5566.online彩票每日存送| www.25620.com-彩库宝典ios版| www.21721.cc-彩神争下载-| www.8493.cm-趣彩网官网登录| www.086848.com-七乐彩胆拖计算器| www.603458.com-中彩网首页i| www.675965.com-结婚10万彩礼多嘛| www.no58.com-最好用的彩票选号器| www.87898.com-中国足球体彩竞彩网| www.433077.com-遵义买彩票-| www.537028.com-168彩票官方网址| www.607028.com-江西福彩时时彩开奖| www.677116.com-彩色手提纸箱设备厂| www.426466.com-浙江体彩6十丨| www.96882.com-足彩大赢家购买方式| www.004212.com-福彩双色球结果今天| www.443466.com-中国福彩3b彩图| www.239746.com-购彩彩票下载| www.748385.com-中彩彩票一分三| www.899076.com-彩票图今天三的| www.044395.com-宁夏福彩app| www.305378.com-七乐彩35期-| www.32rl.com-高频彩提现多久到账| 彩世界www.99788j.com| www.944055.com-微微彩票用户注册| www.fr56.com-福彩快三规律走势| www.257681.com-038彩票最新版| www.382755.com-幸运彩大发快三| www.565306.com-讯彩是黑平台吗| www.2839.xyz-昨晚福利彩票开什么| www.9971.cm-彩票榜软件是真的吗| www.75737.com-香港线上彩票| www.561875.com-广东福彩走势图| www.a04.top-上海快三单双预测| www.0137.net-彩色的填写词语| www.83578.cc-彩票分析师年收入| www.116171.com-兰州今天快三走势图| www.703448.com-福利彩票湖南| www.879073.com-彩票走势图排三| www.qk78.com-中原彩票能赚钱吗| www.028646.com-福彩3d彩彩报| www.826789.com-盛兴彩票改数据| www.970149.com-台湾玩运彩-| www.nm07.com-中国竞彩投注比例| www.07vd.com-刚力彩芽强捧| www.88ux.com-彩票多久不领会过期| www.313194.com-分分彩计划三期必中| www.178825.com-体彩开奖-| www.249159.com-福彩大彩网-| www.824478.com-新彩网字谜画| www.505843.com-做个黑彩票赚钱吗| www.603132.com-彩6是什么平台| www.866114.com-快三中奖倍数| www.936755.com-麒麟彩票是诈骗吗| www.981357.com-中国足彩网竞彩足球| www.yn5.com-京彩app-| www.183925.com-河北快三最大遗漏| www.715897.com-3d杨大侠彩乐乐| www.795880.com-新加坡福和彩| www.867638.com-七星彩头尾中奖| www.947286.com-首尔彩票-| www.674922.com-澳洲彩票大奖| www.751984.com-彩拾app怎么下载| www.817822.com-北京体育彩票走势图| www.883809.com-快三大小单双的规律| www.950565.com-乐彩客ios版本| 人人彩票www.rrle2.com| www.bt27.com-送体验金的彩票平台| www.su46.com-下载福彩3d-| www.5mh.cc-彩票1800模式| www.57hi.com-体彩今年何时开奖| www.933678.com-时时彩网上代理| 818合彩www.www.5666hc.com| www.143460.com-彩票快3怎么买得中| www.36900.com-88福彩-| www.ok01.cc-哪个平台可以买彩票| www.3763.biz-七星彩票图库参考| www.08726.com-吉林福彩快三预测| www.81719.com-彩票一夜暴富的概率| www.099.in-快三百家号-| www.101108.com-八亿彩老师带人| www.28841.com-福彩3d如何购买| www.85155.com-国产3d彩漫-| www.078885.com-中彩网论坛讨论区| www.103600.com-广东彩钢夹芯板| www.175611.com-福彩快3助手免费版| www.557223.com-3d彩票网址大全| www.648793.com-七彩辣椒种子| www.pe20.com-幸运快三怎么看走势| www.92267.com-福彩双色球诗迷总汇| www.5ss.com-彩票捐款抵税规则| www.365979.com-排三分析预测彩吧网| www.003313.com-福彩哪个中奖率高| www.086574.com-爱刮刮彩票机加盟| www.778807.com-中彩网app分钟| www.757567.com-信博彩票是假的吗| www.867293.com-福利七星彩-| www.85222.cc-胜负彩16175| www.cp381.cc-福利彩票快三怎么玩| www.174234.com-湖北快三是骗局揭秘| www.947471.com-3d福彩购彩小贴士| www.994740.com-好彩客网页版网址|