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.533515.com-彩票那种简单| www.760134.com-彩票站点中奖提成| www.744246.com-九万彩票客服| www.120161.com-宝马彩票计划网站| www.f23.org-支持提现彩票app| www.97xi.com-ig传统彩pk10| www.188504.com-江苏快三爱-| www.yz17.com-广西快三福利彩票| www.162792.com-甘肃快三豹子| www.284518.com-时时彩有几种| www.65456.com-彩票要邀请码| www.14sd.com-彩票开奖安徽体彩| www.682343.com-竞彩微信-| www.807772.com-陈赫中奖彩票第几集| www.905713.com-一分快三经验| www.974618.com-易众彩店可靠吗| www.mk08.com-青海快三开预测| www.29.vip-河南福彩豫彩通| www.91yk.com-千百万彩票网| www.n88.cn-中彩网官方网站下载| www.86mw.com-乐彩网快3下载| www.273450.com-海南竞猜型彩票玩法| www.442567.com-福彩3b预测专家| www.2713.net-彩票票面解读| www.989480.com-上海快三彩票投注| www.79896.cc-银川彩票领奖地方| www.357385.com-合伙买彩票好吗| www.098.cn-彩c16安卓版| www.8501.shop-易彩娱乐注册账号| www.875292.com-彩票规划骗局| www.754158.com-彩经网手机app| www.886103.com-彩库宝典手机版下载| www.981322.com-竞彩计划单表格| www.ar17.com-体彩竞衫-| www.yt29.com-吉林市彩票管理中心| www.cai919.com-三分快三免费计划| www.04au.com-彩票免费在线试刮| www.pe24.com-彩票走势图表软件| www.45xn.com-刮刮乐彩票兑奖期限| www.260117.com-彩票兑奖中心| www.181657.com-贵州快三开奖纟结果| www.308391.com-万彩8-| www.605313.com-qq昵称变彩色复制| www.717839.com-77彩票充值截图| www.802313.com-精彩的近义词| www.925858.com-时时彩开挂-| www.258173.com-大奖快三计划网址| www.398639.com-有什么竞彩参考软件| www.75818.cc-网上彩票歉钱app| www.067785.com-有想做黑彩代理的吗| www.385194.com-拍拍贷彩虹计划| www.533523.cc-彩票对压玩法| www.621353.com-山东11选5爱乐彩| www.720429.com-七星彩怎样看规律| www.860486.com-m8彩票软件-| www.959166.com-御彩轩ios-| www.4um.com-彩赢家号百彩票| www.98xr.com-江苏福彩快三软件| www.689114.com-福彩巅峰独胆| www.230731.com-购彩软件-| www.939637.com-重庆市彩经常不开奖| www.997014.com-幸运彩票幸运无限| www.db17.com-黑彩怎么坐庄| www.2685.cm-彩票注册就送彩金| www.279679.com-时时彩软件分析软件| www.299073.com-彩神吉林快三计划| www.025423.com-福彩3d开奖视频| www.9149.cc-福利彩用户注册| www.315876.com-爱彩乐时时彩| www.431568.com-下载爱乐彩票网| www.529531.com-体育彩票专线宽带| www.784883.com-七星彩今天开奖| www.917761.com-彩虹六号手游| www.993966.cc-竞彩庄家盈亏| www.dv37.com-幸运快三稳赢方法| www.0997.net-中彩擂台赛双色球| www.462667.com-分分彩后三包胆技巧| www.513.bid-我要加体彩群| www.272428.com-褔彩3d合值表| www.282820.com-体育彩票7星彩规则| www.408003.com-没有七星彩买| www.789.cn-彩票双色指南报纸| www.70mf.com-七乐彩奖池查询| www.441486.com-彩票店招-| www.377366.com-917彩票软件| www.506704.com-福彩三d试机号10| www.365328.com-排3杀号定胆彩乐乐| www.001585.com-彩票能赢钱吗| www.040969.com-广西彩票投注下载| www.9593.site-彩票计划微信群| www.435332.com-中大奖彩票登录| www.89308.com-福利彩票查询软件| www.563275.com-uu快三客服电话| www.433242.com-万家彩票下载安装| www.637833.cc-体彩公开-| www.750368.com-933彩票网页| www.841815.com-福利彩票最近| www.905928.com-福建福彩中心主任| www.8093.vip-大发快三彩票破解术| www.537170.com-分分彩后二技巧视频| www.636091.com-彩虹六号买什么版本| www.178803.com-江苏e球彩走势图| www.ka39.cc-破解彩票数字规律| www.47310.com-德州好彩快三平台| www.605067.com-漳州最近中彩票| www.6696.top-网上买快彩有方法吗| www.61224.com-cp彩票安卓-| www.338690.com-玩网上彩票怎么拉人| www.9361.biz-永和彩票app| www.72549.com-竞彩足球讨论区| www.082551.com-2118彩票-| www.813809.com-河内1分彩是什么| www.77hf.com-重庆时时彩第二十五| www.618705.com-打彩票上-| www.023596.com-七乐彩9个号中4个| www.377924.com-彩票系统出租贴吧| www.554008.com-晨兴彩票是真的么| www.618399.com-最火的彩票销售平台| www.620519.com-福彩3d开奖返奖率| www.334292.com-福利彩广西双彩开奖| www.493400.com-守信彩票是真的吗| www.092270.com-福建体彩双色球开奖| www.198977.com-彩票推算法-| www.281925.com-今日彩票预测中奖号| www.355097.com-怎么看福彩是否中奖| www.422627.com-彩客彩网下载安装| www.317.red-彩之王是真的吗| www.893229.com-内蒙古福彩网首页| www.971446.com-竞彩小软件-| www.8887.cm-足彩外围代理| www.41202.com-中彩国际彩票学院| www.090006.com-时时彩代理怎么做| www.162108.com-彩乐汇可以退出吗| www.226886.com-分分快三计划群| www.744847.com-有什么赌彩app| www.812522.com-福彩3d书-| www.878612.cc-天津福利彩票兑奖处| www.986685.com-易网彩票软件下载| www.406822.com-七星彩大小奇偶走| www.340105.com-搞笑彩票中奖信息| www.242866.com-体育彩票中亿元大奖| www.339158.com-北京时时彩彩票平台| www.00792.com-南方双彩网遗漏统计| www.320399.com-微信买彩票赚钱| www.1845.cn-彩民社区-| www.04029.com-微信彩票平台有哪些| www.61848.com-篮球竞彩下载| www.496638.com-体育彩票投资多少钱| www.374003.com-福彩三弟必下胆码| www.628630.com-248彩票会员中心| www.006306.com-山东彩票下载| www.07vd.com-刚力彩芽强捧| www.93dh.com-最早的彩照-| www.586616.com-彩金送9快棋牌| www.251334.com-中彩网邀请码多少| www.321898.cc-南南国七星彩票论坛| www.071337.com-人人红彩票-| www.220428.com-快三秒奶茶总部| www.679215.com-中彩票死于非命| www.520660.com-河北福彩7位数| www.3519.biz-甘肃快三和值奖金| www.1141.top-时时彩对赌刷返水| www.26jv.com-彩票大管家山东| www.913286.com-彩客官网-|