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.885774.com-彩霸王论坛三肖六码| www.327327.com-这期彩票中奖号码| www.402444.com-快三的概率-| www.509248.com-宝利彩票平台登录| www.588357.com-东方彩票-会员登录| www.667737.com-9号彩票官网下载| www.739814.com-福彩3d输了好多钱| www.819581.com-彩票大数据统计| www.894861.com-i8彩票台子怎么样| www.966269.com-香港即时开彩| 博友彩www.426667.com| www.1878.link-2020彩网吧-| www.3389.com-0567好彩网页版| www.05891.com-体彩彩票开奖查31| www.370013.com-福彩3d开奖| www.603813.com-足球彩票大数据分析| www.693163.com-辽宁福利彩票数字3| www.784107.com-台湾福乐彩-| www.871010.com-星彩3d胆码-| www.hu57.com-吉林福彩快三今天| www.134800.com-开彩票店的要求| www.987241.com-体育彩票网站| www.749660.com-红财神报彩图网址| www.77570.com-国家体彩总局网站| www.291911.com-刷彩票流水单攻略| www.365924.cc-富鱼网彩票是真的吗| www.580368.com-500彩票合法么| www.224233.com-uu真人快三计划| www.884717.com-乐彩vip专业版| www.482193.com-体彩排列五怎么兑奖| www.821203.com-十分彩官网手机下载| www.cp748.com-兰州快三连线走势图| www.m17.online-大发快三怎么玩和值| www.931157.com-快三怎么玩能赢| www.12kk.cc-高棉彩开奖-| www.420466.com-广州市福利彩票地址| www.671170.com-万彩吧6i彩-| www.807616.com-彩票之家免费公开| www.521776.com-七乐彩有几个奖级| www.659891.com-爱彩彩票下载到手机| www.796339.com-印尼分分彩是真的吗| www.916955.com-乐迎彩票-| 博友彩www.941194.com| www.yo54.com-福彩新3d-| www.247062.com-彩票分析师大赛| www.561990.com-彩鸿彩票合法吗| www.669277.com-彩票有哪几种软件| www.781564.com-彩票店私自坐庄| www.888976.com-帮人投注时时彩骗局| www.ip8.com-大发快三下载网址| 鸿运彩票www.hy0038.com| www.692559.com-泰国彩票怎么玩| www.850591.com-今天3d彩民乐钱途| www.j76.me-红五图库、彩吧网| www.176984.com-福彩1分钟快三| www.731431.com-万优彩票登录| www.927580.com-破解福彩3d断组法| www.973663.com-捷豹专业彩票平台| www.xw50.cc-六利彩开奖结果查询| www.025193.com-快三必中高手| www.299084.com-计划快三软件下载| www.187456.com-福利彩票输入查询| www.782283.com-中福彩票平台| www.320051.com-老版360彩票软件| www.77as.com-三d彩票预算公式| www.4721.cm-大发彩票旧版网| www.00168.com-福彩22选五走势图| www.2749.cc-汉中体育彩票中心| www.422205.com-好的福彩3d的书籍| www.970502.com-买彩票中了-| www.313478.com-幸运彩票平台网址| www.416869.com-乐彩网排五专家预测| www.79966.com-快三446-| www.kc13.com-鸿彩票软件-| www.3336.cc-日本全彩本子| www.a14.biz-新浪爱彩软件| www.xx71.com-高频彩票贴吧论坛| www.554574.com-全民彩票能买彩票吗| www.649955.com-排五开奖结国彩宝贝| www.721639.com-足彩310专家预测| www.366576.com-48色彩铅排序| www.060683.com-黑彩犯法么-| www.590863.com-彩生活o2o-| www.765734.com-中博系统彩票平台| www.25ag.com-好彩快印电话| www.177883.com-福彩快三开奖号码| www.317076.com-多期彩票怎么兑奖| www.412709.com-今日竞彩结果查询| www.189279.com-乐彩网首页福彩3d| www.633601.com-下载神彩通-| www.362828.com-雨后彩虹的形成课文| www.417518.com-分分彩选号软件| www.604897.com-598彩票网官网| www.388224.com-华彩商业中心| www.913342.com-浙体彩6十1走势图| www.999291.com-下彩网安卓客户| www.lk80.com-彩八下载安装| www.3hk.com-那个彩票平台最正规| www.313308.com-体彩大乐透领奖地址| www.3854.vip-中国福彩3d和图| www.675372.com-彩娱乐app-| www.789898.com-福彩双色球诗迷汇总| www.896756.com-基诺型彩票的漏洞| www.695020.com-辽宁体育彩票大奖| www.57271.cc-锋彩直播最新版| www.274053.com-求三分快三的书| www.055783.com-破解快三软件提款| www.204771.com-江西快三投注平台| www.901.me-学玩彩票技术| www.z22.com-爱购彩app官网| www.28778.com-代玩彩票是真的吗| www.4564.cc-福彩3d34期开奖| www.yg73.com-倍投快三-| www.ta42.com-福彩有哪些彩票| www.85qr.com-彩票大家乐邀请码| www.834267.com-好彩爆珠柠檬| www.947929.com-高手网特彩吧| www.sa7.com-南方双彩网专家预测| www.117191.com-低成本的竞彩2串1| www.778221.com-彩迷葫芦第西瓜视频| www.511774.com-南宁彩票-| www.544059.com-福彩3d小军第四版| www.gg18.com-下载快三走势图| www.691666.com-50o万彩票首页| www.954942.com-彩票远程接单打印机| www.cp6652.com-大发快三技巧口诀| www.1368.cn-彩票推销是什么意思| www.937548.com-幸运彩票合法的吗| www.276291.com-各种釉彩大瓶贴吧| www.369998.com-国家彩票做假视频| www.466909.com-七乐彩多长时间过期| www.557213.com-儿童创意水彩画教案| www.644662.com-时彩公式-| www.900253.com-福彩中奖助手下载| www.969156.com-天天中彩票是骗局吗| www.860761.com-快三二同号什么意思| www.964114.com-快三彩票人工计划| 大赢家彩票平台www.183209.com| www.hk32.com-买彩票怎么赚钱| www.yb89.com-天津市彩-| www.29156.com-怎么用话费买彩票| www.9613.net-体彩竞彩比分新浪| www.231477.com-全民中彩票下载| www.397594.com-彩票停售时间每晚| www.572257.com-竞彩网手机版本| www.677229.com-全国彩票app| www.747401.com-彩票开奖贵州快三| www.816419.com-时时彩上岸自救| www.884820.com-亿彩堂app下载| www.963483.com-澳客彩票客户端旧版| www.3754.xyz-南海七星彩头尾和数| www.131555.com-文山彩票大奖| www.lu09.com-今晚好彩三开奖结果| www.o66.top-彩票可以作为赠品吗| www.75iw.com-106彩票-| www.3056.biz-雅彩彩票下载| www.7856.hk-足彩预测公式| www.522117.com-高频彩最新规定| www.632001.com-七星彩网易直播| www.773028.com-6188彩票下载| www.996853.com-双色球机选新浪彩票| www.tx12.com-海南私彩app| www.91fj.com-辉煌彩票兼职| www.41314.com-玩彩票软件是什么|