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.287513.com-优彩区44oo44| www.254473.com-河北快三三同号通选| www.72940.com-亡灵天涯彩票专栏| www.831649.com-微信买体彩世界杯| www.252903.com-好彩极速快三| www.di66.com-2分快三平台| www.31bm.com-福彩3d开奖多少钱| www.414999.com-红树林彩票网址| www.389252.com-福彩怎样加盟费多少| www.52517.cc-好彩彩票下载官方版| www.019639.com-美国超级百万彩票| www.192005.com-河南快三任意俩码和| www.952041.com-5分彩开奖走势| www.2vh.com-999彩票百度百科| www.834452.com-欧盟好彩蓝莓单爆| 澳客彩票www.106ak.com| www.yu87.com-神圣彩票下载| www.7067.com-河南福彩中奖规则| www.346383.com-李彩桦现状-| www.441121.com-波头彩钢板单板机械| www.543868.com-福彩彩票快3| www.zz03.cc-分分快三中奖技巧| www.953214.com-福彩快-| www.891795.com-晓风彩票官网| www.42115.com-彩票是什么样| www.4633.vip-体彩能打双色球吗| www.yy9.com-广西快三规律技巧| www.3ex.com-乐彩娱乐com| www.764.date-简单彩色画-| www.98kp.com-周银鹤六爻测彩| www.974137.com-美国彩票千万美金| www.730.cc-时时彩如何看走势| www.653956.com-全民彩计划聊天室| www.993937.com-广西淘宝快三走势图| www.0573.net-体彩第19026期| www.57237.cc-彩宝宝手机版| www.268797.com-快三查询图-| www.448119.com-华彩微信智投是什么| www.93tu.com-彩票员工被判11年| www.293339.com-幸运快3彩票计划| 凤凰彩票www.55228l.com| www.vx86.com-快三不输方法技巧| www.85hp.com-彩友多吧-| www.768234.com-特区彩票808| www.862339.com-福彩3官方直营| www.926998.com-主要彩票-| www.976460.com-水冶彩礼-| 优彩网www.974090.com| www.021406.com-爱中彩票app下载| www.gt39.com-彩票站吃票有人管吗| www.144525.com-安徽快三群-| www.254261.com-幸运快三开奖号| www.393897.com-时时彩输钱了怎么办| www.519127.com-彩票3d丹东图| www.591735.com-彩票网球退赛怎么算| www.668350.com-3d彩票定时器| www.747939.com-我要中彩票靠谱吗| www.822512.com-福彩群英会倾家荡产| www.902350.com-玩手机黑彩怎样赢钱| www.970161.com-排列三乐彩网预测| www.cai3677.com河南福彩22-| www.26192.cc-彩虹是怎么形成的呢| www.420093.com-乐游彩票靠谱吗| www.209819.com-优彩社优彩社区了知| www.289762.com-福彩三d字谜总汇| www.37674.com-体育彩票管理条例| www.519955.com-福乐彩是什么意思| www.371478.com-全天时时彩数据中心| www.8217.biz-吉林快三合值跨度| www.284525.com-江西时时彩重复开奖| www.61we.com-小米日历加彩票开奖| www.875.date-世爵彩票平台怎么样| www.7779.pw-竞彩足球技巧| www.31866.com-福彩三地黑圣手字迷| www.81144.com-福彩3d关公三字经| www.444490.com-网易竞彩分析| www.y13.top-乐彩排列三字谜迷| www.199424.com-彩票双色球往期开奖| www.272477.com-安徽快三现在走势图| www.jh88.cc-发彩网彩票开奖结果| www.73.cc-唤醒幻想吧全彩福利| www.711067.com-558赢彩-| www.254016.com-七星彩加急版| www.882801.com-k彩有几年的历史了| www.961176.com-七乐彩守号规律| 彩票大家乐www.21202p.com| www.gc51.com-3d牛彩字迷总汇| www.401786.cc-万人彩彩票-| www.498224.cc-777福彩社区预测| www.550077.com-彩视软件怎么开直播| www.000848.com-彩票缴款通福彩| www.076760.com-玩运彩app-| www.10193.com-网易彩票彩票开奖| www.500061.cc-竞彩计划-| www.zd3.com-福利彩票3d字谜| www.060868.com-彩客站软件-| www.146360.com-彩神v111-| www.264838.com-开大小单双是啥彩票| www.339560.com-彩吧合粉吧图谜总汇| www.424322.com-福彩中心官网8炫彩| www.523579.com-时时彩收费软件购买| www.800331.com-网上彩票赚钱真假| www.881984.com-稳定的彩票平台制作| www.951674.com-足彩6串1全包技巧| 网易彩票www.062wy.com| www.ac10.com-体育彩票中奖号码| www.634655.com-3d彩跨度有多少组| www.707251.com-彩票摇一摇-| www.25az.com-周傅峰华彩| www.94mc.com-全国各市彩礼排行| www.25677.com-分分彩骗人-| www.80303.cc-福彩网用户注册| www.552884.com-时时彩彩网站| www.00518.cc-近期七星彩中奖号| www.vh82.com-五分快三下载| www.37ll.com-七星彩幸运之门| www.594697.com-重庆时时彩官网下载| www.092.mobi-彩票500网走势| www.301252.com-亿彩彩票app下载| www.434308.com-彩16安卓-| www.659878.com-朋友圈彩票骗局| www.311533.com-吉林快三型态走式图| www.04795.com-微信购彩票合法吗| www.157037.com-易彩网彩票是真的吗| www.265272.com-中国福利彩票快三| www.358933.com-体育彩票是几个好| www.254215.com-福彩自助app| 彩民村www.88cmc.com| www.93649.com-微彩吧app安卓| www.93vh.com-彩色的梦画画大全| www.0536.xyz-江苏福彩大乐透开奖| www.918683.com-u9彩注册-| www.590832.com-徐州彩票一等奖| www.764789.com-最好用的彩票app| www.855232.com-体彩主任领走47亿| www.911099.com-安徽快三最新预测| www.969532.com-体彩7位-| www.cp1.com-王素英买彩票中十| www.018091.com-傲赢彩票app| www.42420.com-彩票558app-| www.877718.com-购买网上私彩| www.222306.com-中国体育彩票几点钟| www.345168.cc-如何注册亿乐彩| www.130539.com-福彩快三套路| www.663311.com-6彩20-| www.6287.biz-甘肃福利彩票3d| www.958005.com-富彩官网-| www.135300.com-7天彩票-| www.265732.com-快三计划倍投| www.761648.com-山东体彩双彩论坛| www.828137.com-吉彩宝-| www.899738.com-网上申请福利彩票站| www.cp679.com-江西体彩11选5| www.205370.com-体彩大乐透兑奖流程| www.583.gg-最新时时彩走势图| www.ma52.com-快三3个6豹子规律| www.534.in-大漂亮彩票论坛| www.815571.com-福彩p3开奖结果| www.135217.com-7天彩票官方下载| www.651494.com-五分彩官网走势图| www.066442.com-8k彩票大发快3| www.689515.com-657彩票在线| www.86751.cc-福彩牛彩会-| www.63115.cc-安徽快3彩经网|