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.0014.online广东这边买生肖彩票| www.7048.vip-生肖彩票规则介绍| www.41977.com-d9彩票99269| www.01sm.com-掌上时时彩苹果版| www.281.date-国产口碑好的彩妆| www.961804.com-新浪福彩直播| www.lo2.com-河北福彩3d试机号| www.102769.com-丰彩彩票图片| www.69431.com-98彩票被骗-| www.076775.com-什么彩票是六位数的| www.185586.com-江苏快三的玩法| www.121602.com-手机选彩票软件下载| www.09646.cc-彩票兑奖处是啥意思| www.555782.com-网易彩票网电脑版| www.687743.com-官方掌上平台彩票| www.3717.win-体彩排列三蜂巢图| www.17181.cc-体彩可以开直营店吗| www.535420.com-体彩开奖怎么看中奖| www.576199.com-福利彩票最多多少倍| www.664381.com-七星彩头尾表图| www.752078.com-伪造中奖彩票被调| www.828305.com-披红挂彩是什么意思| www.896894.com-双彩开奖走势图今晚| www.963594.com-做彩票代理怎么赚钱| www.cai5422.com买彩票怎么选号| www.021267.com-快乐彩票三抢红包| www.568107.com-建盏养出七彩光图片| www.638461.com-色彩静物临摹图片| www.718603.com-彩虹象征什么| www.797063.com-曹淑彩博客-| www.869119.com-快三平台时间差| www.931696.com-福彩体彩牌匾图片| www.983474.com-贵州福彩网首页| www.oh99.com-福彩定位胆玩法技巧| www.z96.cc-彩票国际信誉大平台| www.257300.com-中彩福彩票软件| www.635514.com-国内彩宝哪个品牌好| www.690336.com-福彩3d多久开一次| www.635723.com-宝乐彩票快三| www.713020.com-福彩3d骗局-| www.798853.com-88彩票网手机登录| 九九集团www.99jtb.com| www.096678.com-彩票哪个中奖率高| www.197377.com-福利彩票被查| www.4355.cc-天水福利彩票中心| www.797381.com-精彩彩票网址| www.hv78.com-p3走势图乐彩网| www.37783.cc-暗网彩票如何加入| 500彩票www.330192.com| www.628.red-e彩在线彩票注册| 金冠彩票www.49956s.com| www.058608.com-高频彩开奖直播网址| www.985633.com-淘宝快三基本走势图| www.553567.com-快彩屠龙什么意思| www.358796.com-5个数的是什么彩票| www.507165.com-非凡彩票可以赚钱吗| www.451490.com-腾讯分分彩分析视频| www.4682.vip-吉林快三开奖号| www.669818.com-彩色沥青混凝土比重| www.678505.com-福彩3d无错条件| www.777472.com-ag彩票app-| www.233381.com-福彩快乐十分走试图| www.6064.cn-奇门预测彩票技巧| www.34694.com-人工智能体彩| www.63142.com-亚博体育竞彩安全么| www.351953.com-完美彩票1-| www.293502.com-易彩快买单双技巧| www.488581.com-新浪彩票网络彩票| www.603291.com-中国体彩排列5| www.871236.com-彩71官方下载| www.968487.com-福彩作弊的回应| www.kv4.com-安徽快三遗漏图| www.805726.com-中国体彩分类| www.475396.com-体育彩票可信吗| www.585687.com-中彩快三计划| www.687205.com-我附近的体彩投注站| www.856685.com-彩六ela全民| www.979646.com-快三追得倾家荡产| www.uk06.com-彩宝网3d开机号| www.163.hk-彩客胜平负-| www.424180.com-免费彩票全年资料| www.8887.net-竞彩八串一的经验| www.660871.com-中乐彩手机平台网| www.62rt.com-义乌体育彩票店转让| www.2044.org-k8彩票黑钱-| www.9923.online今天体彩开奖| www.265716.com-王宝财彩票诈骗案| www.330116.com-好彩app靠谱吗| www.914911.com-天天彩富网后一定胆| www.44481.cc-选三型彩票-| www.888117.com-彩票106福利版| www.969638.com-精彩音乐汇-| www.cai389.com-彩神8官网-| www.339124.com-时彩族官网软件| www.842342.com-最近福利彩票地址| www.cx32.com-时时彩哪个平台最好| www.266713.com-快三怎么注册账号| www.909868.com-5分快三是什么彩票| 博亿彩票www.664by.com| www.8931.top-做时时彩代理判多久| www.267579.com-彩票思路-| www.009199.com-大乐透走势图彩宝贝| www.809030.com-足彩中奖心得| www.973413.com-彩虹天空歌词| www.4so.cc-刘军玩彩教程| www.0578.me-福彩吧是真的吗| www.0068.hk-美国有什么彩票| www.927005.com-今日快三号码| www.0777.pw-宏图科技玩五分彩| www.969348.com-上海快三三不同遗漏| www.ey68.com-高频彩票或被叫停| www.313478.com-幸运彩票平台网址| www.065598.com-新彩彩票是真的吗| www.163692.com-竞彩足球分析软件| www.234886.com-福彩3d怎么玩| www.822871.com-七星彩的网址| www.027601.com-易彩是不是属于违法| www.209869.com-时时彩代理刷流水| www.492878.com-福彩流水怎么回事| www.155578.com-上海快三的玩法| www.39289.cc-快三万能计算器| 大赢家彩票平台www.307816.com| www.223307.com-彩神通彩票软件| www.655220.com-互联网彩票整顿| www.273130.com-福彩竞彩-| www.345775.com-查看福彩开奖结果| www.260235.com-江苏福彩兑奖流程| www.359662.com-一注彩票能中多少钱| www.55310.cc-时时彩五星通选大底| www.914529.com-优信彩票平台可靠吗| www.972995.com-最老版彩库宝典下载| www.bg54.com-韦德博彩app| www.67qm.com-全国有多少彩票站| www.3142.cc-宝哥胜负彩推荐| www.922550.com-知名足彩分析师| www.971364.com-中国福彩3d诗谜| www.ac2.com-江苏快三遗漏统计| www.061601.com-好彩客老版下载| www.152984.com-分分彩后一稳赚技巧| www.236553.com-彩票开奖快三开奖| www.280323.com-澳客彩票网信誉好吗| www.358374.com-广东体彩官方网| www.98453.com-分分彩胆码计算方法| www.549651.com-体彩买欧冠怎么买| www.783922.com-航天彩虹股吧| www.879150.com-在线快三-| www.960494.com-彩票3亿-| 彩票坊www.775979.com| www.9809.loan-七星彩7注一等奖| www.695113.com-中国体育彩票介绍| www.786028.com-幸运极速快三| www.915095.com-体彩网买大乐透| 盈发彩票www.66yfa.com| www.25099.cc-十大水彩品牌| www.007024.com-幸运彩彩票app| www.327.org-中发彩-| www.tk76.com-公益彩-| www.872590.com-快三技巧绝密杀号| www.535117.com-黄金分割率与彩票| www.725399.com-体育彩票不是赌博| 大赢家彩票网www.54400q.com| www.oj04.com-酷发财彩团队彩票| www.76tz.com-杭州福彩网公示| www.020472.com-彩38官网-|