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.568122.com-怎样玩彩票才能赚钱| www.706065.com-彩票海报图片| www.796791.com-网上买彩票在哪买| www.880301.com-2元彩票网排列五| www.987734.com-38彩票-| www.an48.com-解福彩藏机图| www.yq80.com-体彩7位数-| www.61oj.com-35彩票全天计划| www.1114.biz-竞彩足球最高奖金| www.q04.net-3d彩票有几种玩法| www.427755.com-足彩曲昌春在哪推荐| www.021442.com-天天竞彩彩票| www.3344.hk-体彩兑奖指定银行| www.8765.cm-彩票计划防连挂技巧| www.257051.com-中国福彩快三新规| www.445504.com-安全彩票o2o系统| www.593155.com-彩虹无人机重量| www.722097.com-山东体彩论坛网| www.857117.com-菲律宾有什么彩票| www.970233.com-彩票大赢家任九场| www.gm27.com-快彩王官方网站| www.02wi.com-体彩好吗-| www.2500.tv-刚力彩芽婚纱代言| www.xy53.com-澳发彩票一手机版| www.86al.com-喜乐彩票计划员| www.2685.cm-彩票注册就送彩金| www.8338.live-七星彩下载苹果手机| www.365190.cc-彩票近期中奖号| www.666565.com-万达网彩票-| www.p06.org-体彩七位数中5位| www.72ku.com-体彩6+1开奖规则| www.1880.in-彩108彩票-| www.xw65.com-彩票只能去店里买吗| www.93yy.com-福彩双色球规则玩法| www.3870.cn-七星彩号码查询中奖| www.9156.top-福彩三d正版天庚图| www.37715.cc-7星彩大公鸡下载| www.79985.cc-刘军教你玩彩票教程| www.057972.com-大学生能买彩票吗| www.129132.com-北京福彩双色球规则| www.208193.com-广东有快三吗| www.284628.com-时时彩倍投计算器| www.354777.com-怎么买彩票会中大奖| 乐彩网www.293399.com| www.xg71.com-318彩票app-| www.85st.cc-足彩亚盘pdf| www.6314.shop-福福彩彩票站多少钱| www.44330.com-全民彩网址-| www.041682.com-吉林快三app| www.625720.com-犀牛彩票下载安装| www.83892.cc-福利彩票七彩乐玩法| www.122749.com-众彩网骗局组织| www.712859.com-七星彩中5个| www.902885.com-彩39彩票客服电话| 彩之家www.18czj.com| www.u14.me-天天中彩票买不成| www.3091.biz-七是彩最新开奖| www.35699.com-头条号官网彩票| www.039507.com-七彩彩票网能信吗| www.219026.com-百姓彩种-| www.356375.com-怎么用数学计算彩票| www.546575.com-彩票网站建设ag| www.741111.com-体彩好还是福彩好| www.884025.com-福彩3d综合走图| www.07071.com-工行银彩通-| www.015732.com-手机怎样买七星彩| www.271882.com-立彩平台app| www.412463.com-彩票在线计划员| www.33yw.com-九万彩票经典安卓| www.3153.biz-买彩票看图形怎么看| www.73892.com-广西体彩十一选五| www.106384.com-彩票宝下载-| www.242828.com-福彩网平台是骗| www.382835.com-七星彩预测专家频道| www.554334.com-福彩3d名词解释| www.69425.com-500彩票怎么用| www.082511.com-118彩票怎么样| www.220417.com-大快三破解版手机版| www.340540.com-彩吧天中图总汇| www.497395.com-首彩葡萄酒怎么样| www.783336.com-网络彩票举报网址| 大赢家彩票www.599399.com| www.sr41.com-最新的六壬测彩法| www.973330.com-彩虹岛m-| www.9ex.com-临朐北京花园中彩票| www.829.xyz-江苏体彩易球彩| www.7557.cn-彩票软件传销| www.60446.com-网易购彩可靠吗| www.079057.com-彩8计划助手| www.481982.com-福利彩票摇号软件| www.435661.com-湖南福彩微信公众号| www.603862.com-到哪买足彩-| www.758583.com-大发快三邀请码高倍| www.228390.com-彩色压模地坪材料| www.65660.com-七星彩机选在线机选| www.9303.vip-七乐彩最新杀号公式| www.818873.com-买彩票怎么翻倍| www.973747.com-亿彩彩票平台登录| www.093606.com-高频彩是骗局吗| www.334477.com-福利彩票中奖一等奖| www.229726.com-排列三新彩网| www.060627.com-体彩87加盟-| www.826331.com-933手机彩票| www.840538.com-足彩赔率概率计算| www.959452.com-快三多少种组合| www.os88.com-彩票手机购彩app| www.2381.cm-愚人节彩票中奖| www.91958.com-丰彩彩票怎样兑奖| www.89775.cc-年会彩票平分评论| www.909336.com-超级大乐透彩票规律| www.678691.com-注册送c彩金58元| www.503058.com-彩友多最新版| www.705399.com-云购彩票可靠吗| www.0937.date-体彩三d今天| www.28622.com-福彩中奖容易| www.097690.com-福利彩票店的利润| www.313629.com-南粤风采好彩3技巧| www.469799.com-赌足彩输钱-| www.643567.com-天下彩开奖结果表| www.22960.com-彩票大小应该怎么买| www.dh06.com-七星彩玩游戏| www.29bh.com-万彩彩票是正规吗| www.8376.cn-旺角彩皇丶资料大全| www.066091.com-青海快三走势图下载| www.253108.com-山东好彩快三查询| www.468360.com-湖北快三71-| www.61152.cc-038彩时时彩| www.075524.com-怎么开福利彩票店| www.207946.com-天天彩票安卓| www.7117.cc-新德里彩票规律| www.820232.com-陕西彩票领奖在哪里| www.8152.top-乐彩走势-| www.055546.com-福彩双色球派奖规则| www.6553.top-彩宝贝导航首页| www.092325.com-双福彩票网-| www.192815.com-彩票每期都买| www.291629.com-鸿彩快三在哪下载| www.507723.com-竞彩之家里app| www.124855.com-体彩开奖公告七星彩| www.516745.com-黑客攻击黑彩网站| www.981728.com-双色球彩票作假事件| www.3808.org-竟彩官方-| www.108585.com-彩票平台挂机软件| www.2fy.cc-买体育彩票挣钱吗| www.py65.com-彩18app-| www.us92.com-彩票十大信誉的平台| www.30tv.cc-彩虹岛副职业| www.cp436.com-极速快三能赚钱吗| www.tk72.com-公益彩下载-| www.1325.com-体彩106-| www.472813.com-十亿彩票平台| www.568998.com-正规彩票店买黑彩| www.76fm.com-13人彩票分析网站| www.fp60.com-快三选号绝招| www.19sg.com-胜负彩190344| www.894772.com-新大陆彩票-| www.032396.com-今日3d牛彩网字谜| www.35xg.com-彩票势图360| www.5017.vip-k8彩票在线-| www.580489.com-快彩票下载安装| www.949780.com-南方彩票app| www.2423.vip-彩娱乐app官网| www.572833.com-亚博买彩票靠谱吗| www.1oo.cc-彩色饺子机械设备|