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.506236.com-外国能买福利彩票吗| www.432496.com-彩票站怎么搞促销| www.039306.com-亿元彩票是违法吗| www.206405.com-彩票预测计划| www.299368.com-看彩票走势图的方法| www.381089.com-杨光华彩票书连载| www.471354.com-卖私彩抓老板还是抓| www.027015.com-湖北快三遗漏统计表| www.132660.com-买彩票那个app好| www.cai98.com-福彩精彩十分| www.tx99.cc-足彩8串1技巧| www.90ud.com-如何看彩票图| www.3960.vip-体彩离我近的销售点| www.23293.cc-福彩3的-| www.87793.cc-哪里玩彩票的人多| www.122486.com-微信代购彩票| www.251676.com-01彩票平台合法吗| www.339929.cc-19041足彩分析| www.512960.com-爱购彩有谁赢过钱的| www.615098.com-真品辽三彩图片| www.707955.com-充值彩票送彩金| www.834866.com-好彩蓝莓双爆缅甸版| www.909284.com-辽宁快三官网| 旺旺彩票www.264499.com| www.rx14.com-五福彩票官网版下载| www.55vl.com-招行开工利是抽彩票| www.2372.wang-七彩云浏览器手机版| www.04042.com-微信买彩票中奖| www.66460.com-全民汇彩票官网| www.063761.com-彩票店承包经营合同| www.151567.com-红旗彩票正规吗| www.279781.com-彩票时时乐开奖查询| www.353915.com-贵州11选5彩经网| www.448781.com-彩票倍投计算网页版| www.544134.com-七星彩规律的app| www.619308.com-福彩体彩排列五| www.688345.com-广东体彩手机投注| www.768358.com-福彩61中奖规则| www.839324.com-足彩胜负彩分析| www.922727.com-人人中彩票中奖| www.997744.com-一分快三赢钱技巧| www.ed45.com-吉林快三开将结果查| www.xy34.com-澳发彩票网-| www.32ga.com-看一下体育彩票| www.0091.com-七星彩直播网易彩票| www.6163.cn-彩票世界官网| www.25789.cc-彩库宝典现场开奖| www.71625.com-彩票网3d选号助手| www.078043.com-五分彩倍投骗局| www.190486.com-彩票app停售| www.288329.com-爱乐彩11选五辽宁| www.373615.com-快三三同号单选| www.472168.com-中国彩吧安卓下载| www.565110.com-河南福彩网app| www.637416.com-鑫彩注册-| www.716851.com-体彩宝-| www.792323.com-福彩中心是干嘛的| www.870059.com-彩掌柜江苏快三| www.964836.com-浙江体彩下载| 众乐彩票www.389544.com| www.md29.com-爱乐彩平台下载| www.379664.com-彩票中奖原理| www.53hb.com-三d彩票规则介绍| www.310888.cc-香港快乐彩票| www.488298.com-中彩国际登录| www.878392.com-安徽快三三同号预测| www.998887.com-吉林快三是骗人的吗| www.b61.top-福彩助手买不了| www.3839.com-中国竟猜足彩网| www.33661.cc-快乐彩开奖结| www.017999.com-天天赢彩票app| www.127631.com-彩虹云主机-| www.254315.com-糖果彩是做什么的| www.373913.com-沈阳体彩12-| www.533304.com-彩票求均衡-| www.262015.com-河北快三输了几十万| www.379848.com-彩丰物流-| www.515000.cc-彩妆有什么品牌| www.655251.com-网投大发时时彩| www.774324.com-七星彩中奖规| www.969679.com-1088彩票网-| www.wp1.cc-彩票屠龙应该怎么做| www.017196.com-安卓版彩16-| www.172002.com-福彩5d奖金-| www.350879.com-那个网站能买彩票| www.482838.com-有没有两位数的彩票| www.603191.com-福利彩开奖记录| www.2226.me-昆明七彩云南房价| www.678143.com-易彩堂怎么样| www.pd80.com-河北快三是正规的吗| www.018927.com-湖北省3d福利彩票| www.163868.com-中彩票翻身-| www.890986.com-至尊彩大发快三破解| www.578873.com-体彩任选三中奖| www.716078.com-亚洲彩票是非法的吗| www.xy05.cc-千万彩票网址| 网易彩票www.26163z.com| www.390108.com-幸福彩彩票下载安装| www.47105.com-男方给女方的彩礼钱| www.033809.com-网易彩票手机端| www.276562.com-北京快三跨度振幅| www.553525.com-福彩开奖近20期| www.731548.com-易彩网8位邀请码| www.932608.com-玉林彩色纸箱厂| www.a97.com-游戏《彩虹伞》教案| www.6108.cm-足彩亚盘看盘技巧| www.762863.com-旭彩美缝剂多少钱| www.yf61.com-派彩电视怎么下载| www.cai3055.com安徽快三玩法技巧| www.994.cn-本期六开彩开奖结果| www.1222.pw-全民彩票1222| www.044363.com-七星彩推荐号码预测| www.33lh.com-体彩每天停售时间| www.400344.com-全彩漫画5d-| www.699820.com-云发购快三智能解析| www.183697.com-河南快三专家推荐号| 博乐彩票www.35918w.com| www.36ga.com-好彩客旧版-| www.843535.com-体育彩票事业| www.39715.cc-u9彩下载安装| www.4804.vip-彩虹六号黑卡封几天| www.49450.com-彩神预测qq-| www.189708.com-福彩3d开机试号| www.2740.xyz-赢钱彩票下载安装| www.865574.com-彩票加盟代理| www.033704.com-易彩快投注-| www.263830.com-菲律宾5分彩走势图| www.sl66.com-中国足球彩票规则| www.777270.com-ag彩数据下载| www.965405.com-97彩票下载-| www.lx46.com-福建体彩官网| www.nw42.com-北京3分彩开奖规律| www.101197.com-周易预测彩票的高手| www.1465.net-彩铅画视频古风美女| www.688828.com-人人快三开奖号码| www.380943.com-青海体彩11选5| www.547158.com-高频彩开奖平台| www.594460.com-七彩云mz网-| www.18856.com-彩068彩票-| www.0880.pw-白菜博彩的网址| www.21760.com-怎么找彩票台子| www.85628.cc-七星彩创始人白秀华| www.073813.com-彩的含义是什么| www.160633.com-乐彩吧3d折线图| www.301468.com-七星彩今天预测号码| www.397441.com-开体育彩票店需要| www.537565.com-中彩网3d字谜汇总| www.650353.com-彩虹伞的儿歌| www.787810.com-彩客化学待遇好么| www.947292.com-彩票开奖查询预测| www.cp7761.com-福利彩票双色球预测| www.zt43.com-七彩阳光教育集团| www.42pd.com-猫和老鼠简笔画彩色| www.0258.in-安彩李留恩现状| www.9959.com-体彩特刊报纸| www.99946.cc-168彩票是黑平台| www.139022.com-南粤36选7好彩一| www.533030.com-澳门生肖彩开奖| www.654940.com-霞光溢彩是啥意思| www.834533.com-好彩柠檬爆珠焦油| www.983874.com-258彩票下载平台| www.ev56.com-彩票外挂手机版下载| www.x97.xyz-彩票联盟官方| www.88bc.com-彩票兼职代打vx|