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天

知道了
百盈PK10 www.004102.com-福利彩世界代理| www.86909.com-湖南福骰快三开奖| www.135965.com-买彩票网站有哪些| www.981835.com-头奖彩票新闻| www.586798.com-六位数的彩票是哪种| www.686079.com-天津体彩app软件| www.993366.com-足彩奖池滚存| www.ea08.com-新浪彩票网-| www.2805.vip-时时彩大小网页计划| www.02626.com-安卓彩票软件排行榜| www.769671.com-好彩60123输钱| www.375323.com-七星彩开奖在哪个台| www.557878.com-爱购彩安卓下载| www.yk43.com-江苏快三最热号| www.129977.com-南京体彩中心余主任| www.935078.com-天天彩票坑吗| www.2009.date-河南体彩48-| www.560640.com-时时彩四星缩水技巧| www.665555.com-福彩三d天中天齐网| www.806696.com-刮彩票能不能中| www.898679.com-湖北快三两码遗漏| www.977736.com-体彩世界杯竞猜规则| www.bl61.com-彩站宝彩民端| www.682855.com-中国福利彩票终端机| www.0775.cc-七星彩大七公鸡| www.584623.com-彩金可以换黄金吗| www.552655.com-华彩网计划| www.a81.club-地方彩种-| www.81gy.com-福彩015期-| www.163074.com-中国福彩双色球时间| www.298289.com-体彩店装修图片大全| www.388917.com-幸运快三公式| www.550279.com-网易彩票不能买了| www.160734.com-百盈快三出好计算| www.34364.com-电话怎么投注彩票| www.89246.com-网上彩票害了多少人| www.076738.com-体彩排列三预测推荐| www.188469.com-福彩3d合买大厅| www.265490.com-五省快三高手走势图| www.487886.com-福彩吧app下载| www.568231.com-哪里有彩票源码| www.636009.com-张翰七星彩开奖号码| www.703102.com-福彩动物总动员开奖| www.440822.com-体彩11选五拖胆| www.556634.com-七乐彩复式投注金额| www.635616.com-七彩阳光视-| www.708922.com-时时彩预测平台下载| www.09871.com-95彩票靠谱吗| www.mb7.cc-甘肃福彩快三预测| www.128137.com-江苏彩票1800万| www.098016.com-好运快三正规吗| www.221386.com-博牛彩票注册| www.496709.com-小米8安卓彩蛋| www.602557.com-真龙彩票不给钱| www.69546.com-福彩3d查询-| www.44599.com-福彩6加1走势坉| www.026198.com-代玩彩票兼职招聘| www.272833.cc-传统彩-| www.647408.com-时时彩赢彩网| www.688170.com-大信彩票吧-| www.798661.com-盛世彩票正版app| www.24644.com-彩铅画入门教程图解| www.96.xyz-仿写彩色的梦二年| www.1194.cm-彩票回补什么意思| 众发彩票www.979zf.com| www.626.cn-福彩12选5规则| www.132853.com-360世界杯彩票| www.240218.com-乐彩网7500-| www.318920.com-抚州彩票店-| www.386153.com-彩网123-| www.860137.com-福彩快三追号计算器| www.2888.wang-快三如何中奖| www.533973.com-七乐彩选号中奖公式| www.828733.com-福彩3d怎么挣钱| www.911712.com-河内一分彩技巧| www.985605.com-竞彩足球单场分析| www.ga19.com-天天中彩票网络骗局| www.zr48.com-看体彩-| www.481926.com-体育彩票兑换期限| www.eq20.com-乐彩客app下载| www.t24.site-彩票在线兑奖| www.47ds.com-体育彩票销售员培训| www.812926.com-竞彩足球专家网易| www.903139.com-香港高频快三娱乐| www.969155.com-福彩公益金分配问题| 好运来www.998855aa.com| www.077683.com-骗去玩七星彩| www.365359.cc-黑彩快三抽水子判刑| www.246209.com-山东快三查询| www.33181.com-3d彩保网首页| www.565619.com-彩票两元网手机版| www.654799.com-东方彩票安全吗| www.137395.com-随机彩票会中奖吗| www.202109.com-福彩快三推荐号| www.25058.com-安徽福彩中心领奖| www.956732.com-足彩亚盘欧赔| www.7199.org-彩票税是多少| www.555302.com-k彩彩民褔地| www.611243.com-卖体彩呱呱乐赚钱吗| www.671157.com-p三彩经网走势图| www.522222.com-计划五分彩-| 818合彩www.www.8000hc.com| www.632029.com-679彩票靠谱吗| www.120456.cc-彩票人入门与技巧| www.213681.com-吉林快三软件| www.340535.com-彩吧com1-| www.62hp.com-名人彩票-登录页面| www.532103.com-导师代买彩票| www.581061.com-开彩吧软件下载| www.812350.com-手机万彩吧彩票预测| www.917066.com-彩票33群-| www.997240.com-体彩期3d开奖号码| www.in75.com-山东福彩彩友沙龙| www.954368.com-摸彩票的方法| www.bp76.com-彩吧3d走势图| www.538932.com-赢时彩票-| www.630802.com-258竞彩官网首页| www.023316.com-万博买体彩-| www.82904.com-福彩体彩开桨| www.89qh.com-陕西彩-| www.8yy.cc-体彩键盘修改号键| www.0884.cm-买彩票都中过多少钱| www.6938.top-七彩云南全国分店| www.203043.com-利奥彩票平台下载| www.92023.com-顺丰彩票是正规的吗| www.358608.com-中国体育彩票目录| www.yc1.cc-财神彩票骗局| www.w60.cc-好彩频道app| www.78xl.com-香港皇家彩报| www.3939.cc-竞彩足球开奖半全场| www.585668.com-88cp彩票网-| www.3666.date-福彩3d最大奖得主| www.062020.com-彩民之家下载| www.qs53.com-福彩是几位数| www.923385.com-好彩彩票下载| www.989607.com-最稳彩票计划赚钱| www.ej35.com-网上购彩平台| www.145368.com-老牛足彩推荐| www.7376.biz-上海体育彩票销售点| www.979620.com-五彩缤纷香烟价格| www.mr2.com-玩彩票输了50万| www.tw65.com-福彩彩票长龙| www.473323.com-福利彩票快3陕西| www.796018.com-天津市体彩11选5| www.879811.com-购彩网正规吗| www.968034.com-民政部福利彩票事件| E彩堂www.43818c.com| www.13694.com-黑时时彩平台| www.363305.com-彩票好久开奖| www.971822.com-创彩网能提现吗| www.793930.com-新浪彩票电脑网页版| www.03842.com-豪彩是黑平台吗| www.28156.com-快三违法-| www.79488.com-重庆时时采彩计划| www.716856.com-彩铅画新手教程视频| www.812102.com-3d福彩振福图| www.686.com-购彩3违法吗| www.12973.cc-浙江体彩兑奖规则| www.380243.com-彩票套现怎么算利息| www.503114.com-彩娜-| www.58qk.com-天天好彩app下载| www.890915.com-qq7彩票下载安装| www.676518.com-l彩票查-| www.751174.com-搜索彩票开奖|