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.119329.com-江苏快三中奖牛人| www.332014.com-免费下载人人中彩票| www.469814.com-国外高频彩是骗局吗| www.579441.com-易购彩票是骗人的吗| www.673779.com-台湾福利彩票开奖| www.772766.com-大发时时彩杀一码| www.cp3811.com-快三中奖助手app| www.qh18.com-好彩柠檬爆多少钱| www.30cw.com-彩票中大奖兑奖时间| www.3322.red-彩色简笔画房子| www.17125.cc-e彩堂-| www.85679.com-篮彩加时赛怎么算| www.041133.com-周口彩票店转让信息| www.129582.com-众彩乐综合版金亚洲| www.219249.com-一分彩-| www.307567.com-派彩啥意思-| www.389091.com-彩82彩票平台| www.512812.com-三毛彩票app| www.599796.com-体彩大乐透三等奖| www.686260.com-彩票挂机有用吗| www.789773.com-体彩三码遗漏组六| www.cp822.cc-福彩快三苹果版软件| www.pe84.com-282天下彩-| www.33ds.cc-河北11选5彩控票| www.1152.net-体育彩票的意义| www.8938.cn-福彩3d图迷第三版| www.57612.cc-彩八仙手机版登录| www.015706.com-够力七星彩2015| www.101871.com-红彩网络直播平台| www.184351.com-体彩排列3走势图| www.271908.com-中原彩票官网| www.368050.com-苹果素描彩铅画图片| www.501929.com-如何看七星彩走势图| www.582083.com-乐彩网000-| www.669088.com-神彩网吧-| www.755555.cc-旺旺彩app-| www.993994.com-微彩站怎么下载| www.cd65.com-刷彩票赚钱是真的吗| www.wh42.com-彩13app下载| www.41xz.com-彩票网站账户被冻结| www.1590.vip-777彩票社区| www.67382.com-五分彩最稳定方法| www.039924.com-江苏彩票七位开奖| www.133326.com-四川彩钢围挡| www.233554.com-快三杀号技巧高手| www.324319.com-中国福利彩票鲍学全| www.409166.com-澳洲三分彩规则| www.542048.com-天津彩箱包装价格| www.621739.com-vip.668彩票| www.703998.cc-体彩实体店终报价| www.792716.com-彩票大奖领取过程| www.882585.com-女孩子玩福彩骗局| www.w97.cn-网上购买福利彩票| www.63vu.com-廉江好彩哥规律长局| www.1464.vip-古风少女手绘彩铅画| www.11322.com-万彩网倍投-| www.61146.cc-360彩票走势图全| www.035022.com-彩礼江西-| www.119212.com-凤凰彩票刷钱| www.186922.com-快三屠龙是什么意思| www.278256.com-安微福彩网-| www.361127.com-福彩历史开奖号| www.457913.com-恒彩源码-| www.555463.com-快三一倍多少钱一注| www.633834.com-七彩国际美容套路| www.717845.com-腾讯一分彩是官方的| www.790790.cc-自制彩票模拟器| www.bc70.com-北京多乐彩合法吗| www.uw81.com-快三有赢钱的人吗| www.16ku.com-7彩7-| www.1088.cc-足球彩票让负| www.8334.net-凤凰快三计划| www.38934.com-6合开彩奖结果| www.88418.cc-澳洲强力球彩票| www.051813.com-安徽快三有多少组| www.149855.com-038彩票平台苹果| www.231984.com-福彩6十1-| www.310348.com-手机福彩官网投注| www.386735.com-足彩进球数奖金算法| www.514144.com-彩钢的围挡技术参数| www.602006.com-买彩票中一亿可能吗| www.680061.com-ok彩票最新版下载| www.033889.com-篮球nba竞彩推荐| www.288543.com-足彩8串1技巧| www.616790.com-体育彩票直选5| www.733237.com-345彩票网真假| www.823444.com-四川铝卷彩涂| www.898731.com-福彩3d布衣藏机图| www.969776.com-七乐彩胆拖5拖4| www.79zp.com-彩会聊天室-| www.1924.vip-深圳体育彩票店申请| www.9976.org-下载彩吧图库第一版| www.65593.cc-手机彩票选号app| www.033966.com-彩票最好的投注方法| www.132477.com-河南的彩礼多少| www.209478.com-福彩青海快三开奖号| www.281085.com-私彩报警退钱| www.392235.com-山东体彩扑克牌| www.527639.com-彩合网app-| www.621979.com-五福彩票赢了三万| www.693520.com-大乐透命中中彩预测| www.785034.com-中华彩票网址| www.878964.com-体育彩票大乐透查询| www.968406.com-宁夏体彩中心银川| 大赢家彩票www.799417.com| www.jp16.com-五百vip彩票骗局| www.e44.shop-凤凰彩票提现限制| www.35rw.com-七星彩走势图综合| www.1639.me-爱彩票048app| www.8930.vip-头头博彩是黑网么| www.51213.cc-众购网彩票-| www.94628.com-福彩销售总额| www.062755.com-福彩端真的能挣钱吗| www.165701.com-苹果手机彩铃| www.254685.com-老时时彩走势图彩| www.385233.com-彩虹计划骗局| www.535375.com-彩票有五位数的吗| www.633842.com-东方亮彩被收购| www.738723.com-彩票交流群群号| www.809815.com-彩票的中奖-| www.881781.com-13彩票-| www.991049.com-彩之网3d绕胆图| www.cp1313.com-五分快三最稳定计划| www.mj44.com-好彩投网赌-| www.05zp.com-3g彩票网址-| www.754.com-博彩套利是什么| www.8311.in-江西省体育彩票中心| www.55238.com-国彩彩票合法吗| www.030813.com-太子彩票的骗局| www.152106.com-体彩即开订票| www.253121.com-时时彩平台提现失败| www.321656.com-106官网彩票苹果| www.388586.com-非法经营互联网彩票| www.529085.com-我附近的体育彩票店| www.625206.com-体彩即开彩票规则| www.691901.com-乐乐彩是合法的么| www.766125.com-优点彩票app下载| www.889263.com-王者彩票是真的吗| www.964861.com-海南福利彩票| www.10ap.com-译酷彩-| www.93qr.com-一寸彩照-| www.2907.cc-怎么做网上彩票代理| www.8516.wang-举报黑彩需要什么| www.022832.com-福彩p3-| www.089061.com-重庆福彩大厦| www.145694.com-彩客网竞彩足球擂| www.279853.com-彩乐乐走势图| www.360334.com-体彩排列三讨论区| www.440804.com-619彩票-| www.536960.com-和彩票有关系的网名| www.636666.com-六开彩c8万彩吧| www.731254.com-彩神争霸‖app| www.799414.com-送彩票营销专家唐龙| www.868869.com-俣乐购彩专家专栏| www.974780.com-彩44-| www.cp6277.com-七位数预测彩乐乐| www.lj38.com-中彩彩票注册| www.09.gg-黑彩服务器-| www.58jh.com-甲组体育彩票杯| www.896.cm-新生彩票登录地址| www.4352.xyz-鑫彩网购买大厅| www.9031.cn-竞彩篮球新浪爱彩| www.95499.cc-中超体彩-| www.044658.com-美团外卖中彩票|