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.175250.com-快三代理怎么拿工资| www.032134.com-体育彩票店利润| www.967978.com-宁夏新闻彩票中奖| www.984466.com-彩运网cy088| www.mb1.com-内蒙快三遗漏| www.059109.com-竟彩即时比分| www.172262.com-周易算法算快三| www.316911.com-七七时彩票-| www.0716.site-香港赛马派彩及结果| www.871750.com-青蛙过河彩票中奖| www.181169.com-中彩网是不是合法的| www.801400.com-手游彩票大全| www.970720.com-腾讯分分彩时时开奖| www.90uz.com-体彩第19081期| www.744698.com-02彩票客户端| www.434.online-93彩票app下载| www.0033.cm-体彩七位数随机号| www.12558.com-爱乐透福彩双色球| www.6610.biz-今日快三号码推荐| www.59500.com-app彩票打开| www.950088.com-易赢彩票官网| www.vw11.com-网停售网络彩票| www.557041.com-vr彩票走势图| www.578776.com-福彩3d和直选算法| www.900888.com-高手进时时彩反倍投| www.991944.com-三分彩如何看规律| www.gs94.com-大发时时彩单期计划| www.537683.com-彩云国物语重华番外| www.628775.com-幸福彩票下载安装| www.738339.com-中彩票原理-| www.819708.com-吉林快三20分一期| www.896307.com-9购彩下载-| www.966793.com-彩票人入门与技巧| 如意彩票www.858659.com| www.qs46.com-贵阳福彩中奖未领| www.31aj.com-3d彩票有规律吗| www.40617.com-中彩彩票飞艇软件| www.560814.com-体彩彩吧论坛首页| www.002308.com-幸运快三代玩群| www.112654.com-彩多多苹果app| www.194318.com-江苏快3彩票| www.350111.cc-乐彩首页17500| www.518700.cc-惠民彩票安全吗| www.660626.com-金彩网怎么进不去皮| www.789515.com-竞彩足球对冲必胜| www.895057.com-牛娃彩票app下载| 华人彩票www.555446.com| www.44wb.com-uc彩票app-| www.830815.com-新彩票首页网| www.984397.com-安徵快三时时彩网| www.ii56.com-福彩3d谜语汇总| 天天彩票www.7782a.com| www.577976.com-湖南省体彩中心| www.668176.com-农村结婚彩礼多少钱| www.5590.cc-澳门十二福利彩下载| www.781641.com-彩票开奖好123| www.905255.com-足彩网上购买| www.987684.com-乐优炫彩提现不了| www.904434.com-彩神合法吗-| www.08779.com-彩票杀龙是什么意思| www.mx11.com-快三网络代理| www.38531.cc-七星彩海南私彩软件| www.913615.com-苏州于是足球e球彩| www.880729.com-手机淘宝能买彩票吗| www.972140.com-福利彩票多久兑奖| www.2996.cc-彩票一等奖是多少钱| www.690233.com-足彩310走势图| www.946661.com-工地彩钢瓦围挡做法| www.46zv.com-彩票3d幸运码| www.615068.com-福利彩票3a走势图| www.35115.com-快三稳定盈利| www.9078.top-福彩三地谜语论坛| www.92993.cc-长春红彩旗彩怎么样| www.123164.com-足球竞彩比赛结果| www.604936.com-中澳彩票是骗局吗| www.456328.com-彩票平台领取彩金| www.31055.cc-九鼎彩票app| www.841991.com-彩票公益金分配比例| www.939412.com-福彩四码遗漏| 爱购彩票www.3552z.com| www.430433.com-14场足彩走势图表| www.551901.com-大乐透彩票选号| www.627208.com-038彩票查询| www.71564.com-卓易彩票是哪个网站| www.743939.com-中彩网擂台赛点评| www.582905.com-买什么彩票-| www.721172.com-足彩让球盘在哪买| www.880028.com-天天彩4选开奖号码| www.753196.com-跑马彩票是正规的吗| www.00635.com-北京快三导师微信号| www.tv11.cc-华夏彩票网-| www.0560.cn-福彩大家乐第九季| www.891055.com-至尊彩可靠吗| www.xj51.com-彩票计划9cb下载| www.068050.com-体彩七位数预测号码| www.8610.me-口袋彩票靠谱吗| www.04sc.com-高中校园彩铅画| www.4859.net-梦见自己买彩票亏钱| www.34iq.com-今天彩吧图库| www.290244.com-彩票收藏精品| www.992027.com-湖北福彩有几种玩法| www.217128.com-快三一个号码怎么组| www.369140.com-彩票潘攀-| www.553191.com-53彩票官方app| www.884086.com-中国彩票三十六选七| www.77675.com-彩尊平台怎么样| www.550021.com-网上哪里买足彩| www.719111.cc-彩虹形成的视频幼儿| www.863932.com-福彩3d叶子预测| 大赢家彩票平台www.179223.com| www.7354.com-彩虹六号用加速器吗| www.43699.cc-183彩票-| www.613266.com-500购彩票合法吗| www.22616.com-玩彩票平台有哪些| www.956377.com-彩神输钱-| www.am71.cc-快三助手苹果手机版| www.zl72.com-乐彩双色球字谜汇总| www.32bi.com-江西11选5啊彩网| www.995729.com-足彩只买平局能赚6| www.973859.com-海南七星彩规规律| www.20il.com-九彩僵神秦无风| www.74lj.com-70500彩票-| www.781238.com-微彩吧从哪下载| www.903011.com-福利彩票有任务吗| www.617989.com-最火的彩票代购平台| www.691777.com-胜负彩澳客网任九| www.706007.com-中回竞彩网-| www.779444.cc-王者彩票苹果| www.848534.com-澳洲时时彩是假的| www.857549.com-黑彩量刑标准| www.947683.com-信誉时时彩平台推荐| 500彩票www.50064s.com| www.40hp.com-福利彩票软件大全| www.nf06.com-皇都彩票平台合法吗| www.427799.com-下载个彩票双色球| www.569020.com-六开彩走势图| www.675613.com-千亿彩票是黑平台吗| www.982627.com-腾龙时时彩软件下载| www.71500.com-香港幸运彩-| www.441191.com-大乐透彩票擂台| www.1818.in-9a彩票app安卓| www.52976.cc-时时彩停止2019| www.439249.com-省彩快三-| www.5977.gg-彩讯开奖官方网站| www.502165.com-500彩票怎么买| www.324259.com-中彩网走势图新浪| www.649478.com-博彩业到底有多强大| www.712197.com-e乐彩入口-| www.776444.com-福彩3d追号-| www.854320.com-多彩网彩票安卓版| www.40661.com-云顶国际博彩| www.832160.com-七星彩31期摇号| www.958327.com-今天七彩-| www.5818.club-彩七七苹果下载| www.519046.com-腾讯彩票竞猜退市| www.582681.com-克爹全彩本子| www.67qc.com-体育彩票销售额| www.0732.mobi-开彩票店刷销量| www.4778.in-淘彩联盟软件下载| www.95cv.com-多彩下载app| www.414646.com-彩富人生可信吗| www.362568.com-彩票可以控制输赢吗| www.41181.com-168开彩结果| www.026752.com-百度彩票走势图表|