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.27wb.com-时时彩8码技巧| www.965923.com-福利彩票多少种排列| www.862345.com-全民彩票官方版| www.968043.com-游客在英国买彩票| www.cp0710.com-大发快三投注平台| www.716750.com-水溶性彩铅十大排名| www.45726.com-彩吧第五版-| 中国福利彩票www.33588x.com| www.397910.com-网上购彩票官方网站| www.122879.com-体彩公益金制度| www.98580.cc-腾讯五分彩开奖网| www.811999.com-166彩票下载安装| www.948187.com-福彩中心新主任是谁| www.035840.com-幸运时时彩是假的吗| www.826110.com-够力七星彩官方网站| www.151711.com-彩票交流群吧| www.248487.com-福彩3d彩吧库| www.589024.com-福建省彩票开奖查询| www.806668.com-足彩看盘入门| www.356567.cc-顶呱刮彩票中国红| www.0594.bid-中国篮球竞彩网| www.13946.com-竞彩网是不是合法的| www.82836.com-胜负过关500彩票| www.066447.com-私彩能玩吗-| www.189078.com-百姓彩票怎么样| www.339490.com-湖北快三k彩| www.461629.com-长江快三平台太黑| www.nu19.com-乐福网彩票时时彩| www.90wg.com-彩站宝和彩店宝| www.365677.com-容易临摹的彩铅名画| www.3398.xyz-注册58元彩票| www.676800.com-彩票论坛马会| www.34ks.com-七星彩开奖会从开吗| www.681081.com-网赌彩票的背后| www.881045.com-918彩票-| www.86do.com-彩81网站下载| www.12909.com-运盛彩票网-| www.95322.com-竞彩足球外围比分| www.757207.com-中彩在线快三1分钟| www.081219.com-彩票大乐透大赢家| www.210600.com-福彩快三靠谱吗| www.348433.com-七星彩91-| www.633442.com-买彩票有技巧吗| www.909559.com-乐彩客下载app| www.dj92.com-福利彩票玩法| www.62xy.com-体彩你中奖是真的吗| www.8608.in-智彩11选5-| www.qp13.cc-pc彩票到骗局| www.151968.com-5分快三麒麟团队| www.3778.cc-体彩开奖查询号| www.19336.cc-辽宁体彩兑奖在哪| www.7262.com-小鸡彩虹里面的歌曲| www.37574.com-娱乐彩大厅-| www.86226.cc-天吉网彩票纶坛| www.060810.com-快三彩票大平台| www.020501.com-贵州彩票中奖智| www.65bf.com-重庆实时走势图彩经| www.0698.vip-彩票站如何转让| www.483838.com-下载app彩票| 网易彩票www.092wy.com| www.fn88.com-贵州彩票11选5| www.yt97.com-长春市体彩中心地址| www.402638.com-鑫彩晨-| www.540180.com-外围篮球彩票网站| www.627707.com-快三容易出现的跨度| www.715625.com-福彩3d今天校验码| www.788631.com-河南彩礼为何这么高| www.856202.com-北京体彩联系电话| www.911788.com-新浪爱彩电脑版| www.967460.com-跟彩票有关的群名| www.na45.com-微彩吧下载-| www.33zg.com-九万彩票专业版| www.1387.cm-好彩票苹果下载安装| www.85695.cc-蓝彩开奖走势| www.727308.com-酷彩足球app| www.808365.cc-彩金狮王游戏机| www.879848.com-大发彩票平台正规吗| 豪彩VIPwww.398118.com| www.060.cc-彩票实体店返点| www.8802.pw-天空彩素免费资料| www.40529.com-彩票折叠了还能兑奖| www.842789.com-365天天彩票真假| www.988875.com-彩8正版下载| www.ot33.com-中国福利快三玩法| www.111609.com-vr三分彩是什么| www.159213.com-彩八仙安卓版| www.239108.com-刷彩金风险-| www.d70.in-百度乐彩app| www.28dq.com-彩票开奖结果491| www.971795.com-8号彩票正规吗| www.48zu.com-七彩丹霞图片| www.8569.in-亿彩网官网下载安装| www.77350.com-赢彩网正规吗| www.606495.com-手机在哪买足彩| www.705975.com-博友彩安卓版下载| www.835916.com-中彩那天课后反思| www.942132.com-凤彩网app邀请码| www.ml58.com-中国彩票送彩金| www.105835.com-浙江省福利彩票| www.8952.xyz-大乐透旺彩推荐| www.7283.pw-彩虹的歌曲和儿歌| www.680658.com-彩票app哪个号| www.772430.com-彩民了阳光-| www.865896.com-网络分分彩稳赢漏洞| www.936398.com-分分彩包赚不输| www.994810.com-跑狗玄机图好彩堂| www.gv87.com-易彩网是不是黑平台| www.969093.com-彩金自己怎么刷| www.238630.com-怎么在网上买彩票| www.435337.com-篮球竞彩群推荐| www.550413.com-宝发彩票安全吗| www.5777.live-足彩3串3奖金算法| www.874769.com-彩票数字变化规律| www.023684.com-微信凤凰彩票骗局| www.91454.com-好彩绿好抽吗| www.13jb.com-福利彩票中几个数字| www.12678.cc-体育彩票能中奖吗| www.4751.top-彩票包赢-| www.560527.com-福彩3d彩宝贝| www.680825.com-彩票上瘾能戒掉吗| www.053778.com-同城彩票倒闭了吗| www.257581.com-51彩店app-| www.412327.com-彩票九计划员| www.cs7.com-分分快三技巧公式| www.726375.com-亚上彩平台注册| www.us43.com-苹果彩票网-| www.433214.com-齐鲁彩票几点开始| www.809879.com-必嬴彩票-| www.126850.com-菠萝彩魔图新规律| www.905012.com-江苏快三套利| www.975670.com-正规网上买彩app| www.cu67.com-开福利彩票店赚钱吗| www.325258.com-大数定律彩票应用| www.420338.com-彩票站里都有什么| www.227623.com-福彩网站-| www.323098.com-马来分分彩杀号| www.448005.com-期开奖结果星彩| www.561783.com-私掠团队彩票计划| www.635362.com-七彩假期-| www.779272.com-彩赢助手软件下载| www.82zd.com-移动彩印心情语| www.77905.com-3d彩吧精华布衣2| www.643397.com-香港6合和彩图库| www.344938.com-彩栗开奖结果查询| www.559338.com-三地杀码胆码彩经网| www.277270.com-官方彩安全吗| www.177807.com-上海福彩时时乐玩法| www.619486.com-四柱预测彩票取数法| www.720528.com-七星彩十年历史记录| www.259740.cc-彩票数据专业分析器| www.06201.com-乐彩网中国龙| www.0571.space-彩吧图第四版| www.566496.com-彩虹画太阳儿童画| www.620788.com-福彩三d字画谜| www.711606.com-竞彩足球单关分析| www.779560.com-福建福彩快3开奖号| www.832951.com-快三最多打多少期| www.891103.com-彩票幽默句子| www.950434.com-乐彩网lccp下载| www.986121.com-五彩票app下载| www.bt.com-中国快三投注| www.966707.com-宝马彩票安卓下载| www.cp2985.com-时时彩报警后果| www.787616.com-彩票专业预测网站|