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天

知道了
1分快三 www.933682.com-吉彩彩票是什么东西| www.668011.com-福利彩票现任主任| www.859288.com-七星彩小说下载| www.993836.com-广西新快三开奖记录| www.a54.pw-北京福彩三d走势图| www.1751.win-鸿彩直播梦-| www.33887.com-福彩3的今天选号王| www.032773.com-95彩票app下载| www.220322.com-乐彩网官方app| www.358335.com-南京福彩中奖| www.539769.com-快三的基本动作| www.788608.com-个人玩彩票犯法吗| www.590858.com-一定牛彩票违法么| www.572162.com-有没有扫彩票功能| www.11jc.cc-河内五分彩后三计划| www.83ak.com-大发彩票网址是什么| www.594939.com-彩票复式计算器软件| www.935256.com-166彩票苹果版| www.ss90.com-彩票等级奖奖项表| www.73ov.com-米兜彩票转型| www.021538.com-玩网络彩票心态| www.174444.com-快三网上-| www.150106.com-江西体彩返点多少| www.74nf.com-七星彩天狼星预测| www.2331.win-彩世界时时宝典| www.89330.com-国内正规的彩票平台| www.498974.com-安徽快三开奖视频| www.916024.com-鸿彩快三正当吗| www.390024.com-彩经彩票邀请码| www.930712.com-国外高频彩走势图| 彩吧www.580819.com| www.209758.com-黑彩代理怎么挣钱| www.88948.com-顺盈彩票app下载| www.080512.com-大吉彩票网合法吗| www.161191.com-燕郊彩票站-| www.660726.com-体彩大乐透后区遗漏| www.881552.com-如何制作博彩app| www.404738.com-彩票第40期开奖| www.562319.com-福彩3d交流群号| www.669907.com-海南体彩网唯一官网| www.789038.com-浙江省爱乐彩| www.871026.com-高倍率彩票网| www.946880.com-体育彩票高频彩种| www.cai6689.com快三彩票害死人| www.49tt.cc-福彩江苏快三合法吗| www.qf17.com-晚晚好彩-| www.15ra.com-幸运彩苹果系统下载| www.026189.com-现在最大的黑彩平台| www.973691.com-哪里有彩票纸买| www.72762.com-北京福彩小助手| www.01991.com-彩六套路-| www.63xl.com-网络销售彩票判多久| www.1481.top-玩时时彩合法吗| www.69695.cc-易彩娱乐平台下载| www.38317.cc-北京5分彩app| www.90458.com-彩83安卓版-| www.080017.com-福彩3d怎么研究| www.139387.com-福彩3d跨度推荐| www.207779.com-彩1官网下载| www.271024.com-好彩香烟欧洲产地| www.335968.com-微信购买体育彩票| www.398660.com-体育足球彩票对阵表| www.502396.com-老牛足彩分析| www.565506.com-王牌彩票网下载| www.624321.com-333彩网账号| www.687318.com-多彩贵州网数博会| www.771080.com-安徽快三每天多少期| www.835585.com-手机体彩刮刮乐软件| www.896051.com-彩乐乐福彩预测| www.955260.com-下载彩视577版本| 虹彩集团www.hcjt4.com| www.fh08.com-上海快三和值走势图| www.871341.com-福利彩票扫码查中奖| www.666998.cc-七乐彩奖金二等奖| www.572727.com-足彩讨论-| www.640071.com-福彩三天什划| www.709776.com-实体店彩票网上销售| www.796857.com-胜负彩18109| www.870413.com-金凤凰彩票开奖查询| www.939056.com-杨震足彩新浪博客| www.983974.com-九九彩票骗局| www.ci00.com-彩票网站下载| www.56if.com-小财神彩票-| www.009998.cc-盈盈现金网彩票游戏| www.51387.cc-聊城彩票代理加盟| www.92396.com-竞彩足球投资技巧| www.062590.com-彩神帝不能提现| www.888925.com-神彩争霸ll-| www.974357.com-福彩一周开奖几次| www.cp6130.com-彩票网-| www.ok35.com-下载福彩软件彩票| www.rr40.com-牛彩网手机版中彩网| www.20tg.com-微信时时彩二维码| www.078.tv-快三必中软件| www.2741.shop-江苏快三调整| www.8298.in-22彩票重庆时时彩| www.24226.com-亚洲彩票投注站| www.60411.com-叶贝斯定律与彩票| www.005464.com-快三开奖福建| www.067120.com-众乐乐彩票-| www.123484.com-福彩被捉-| www.188127.com-跨度是什么意思快三| www.841799.com-彩票属于哪种五行| www.909718.com-福彩快3甘肃| www.972756.com-彩客网触屏-| 大赢家彩票www.599690.com| www.37589.cc-福彩双色球被切开| www.91201.com-欧盟铁盒好彩| www.034994.com-福建快三一定牛遗漏| www.0912.vip-彩站app下载| www.6283.vip-体育彩票合作app| www.08421.com-陕西福彩网开奖结果| www.46727.com-彩票站可以过户| www.07049.cc-乐彩网头条-| www.5488.cc-快乐双彩开奖公告| www.18784.com-胜利彩票怎么注册| www.856078.com-苏州体彩苏州| www.513233.com-爱购彩官方-| www.37784.com-购彩软件是真的吗| www.71481.com-专业高频彩计划网站| www.4230.com-彩票分析选号软件| www.874121.com-大彩最新开彩成绩| www.978389.com-福彩快三表-| www.cai6422.com吉林福彩快三走势图| www.ra77.com-快三计划预测| www.07sf.com-七彩票上期开什么奖| www.94ob.com-和乐彩-| www.998435.com-福彩开将结果今天| www.oy58.com-宁夏福彩网-| www.1697.cm-365彩票首页| www.28355.com-镇江体彩中心地址| www.1258.top-08vip彩票-| www.6230.cm-竞彩足球258彩票| www.465812.com-六开彩开奖怎么玩| www.560535.com-安徽福彩3d加奖| www.628152.com-足彩任选14场规则| www.683234.com-玩彩输的想死| www.762798.com-分分时彩计划软件| www.832674.com-778彩票网是官网| www.920882.com-彩神iv怎么打不开| www.995248.com-五分彩五星定位胆| www.1hj.com-千百万彩票下载| www.67gf.com-湖北福彩十分| www.0822.me-足彩欧冠规则| www.32qv.com-中国福利彩票计算器| www.976663.com-四川成都彩礼价格表| www.qj91.com-好彩1及中奖规则| www.1902.tv-人人彩上去-| www.o22.in-吃饭送彩票违法吗| www.544882.com-淫三国梦想星彩无惨| www.08159.com-鹤岗彩票大奖头条| www.59516.cc-那个彩票软件有破解| www.009427.com-中彩在线靠谱吗| www.585603.com-购买海外彩票| www.687743.com-官方掌上平台彩票| www.753052.com-口口彩票是什么样子| www.804252.com-彩票能从网上买吗| www.856876.com-河南福彩幸运彩奖金| www.908914.com-大发快三淘彩票| www.953837.com-追号500期彩票| www.984108.com-99cc赢彩彩票| www.cp967.cc-彩神8网址版登录| www.hw59.com-彩票多害人-| www.068633.com-l上海快三开奖结果|