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.197120.com-七彩奖开奖结果| www.60459.com-乐彩彩票是正规的吗| www.144165.com-彩票实体店营销方案| www.304369.com-今日快三甘肃| www.410049.com-鸿运来彩票网靠谱吗| www.550224.com-上海彩票机器人投放| www.804407.com-p3双彩图-| www.882436.com-中国福彩3d讨论区| www.953674.com-彩票站app下载| 凤凰彩票www.5091x.com| www.580331.com-一号彩dt-| www.280114.com-彩票幸运农场开奖| www.6780.vip-高频彩app平台| www.194814.com-代玩幸运快三骗局| www.282457.com-2019快三微信群| www.808487.com-安徽体育彩票网站| www.128146.com-河南省福利彩票官网| www.699332.com-61彩票网-| www.34tj.com-七星彩开了多少年了| www.323004.com-牛彩藏机图谜汇总| www.391696.com-易迅时时彩-| www.46737.com-浙江体育彩票6十1| www.6866.cc-海口体彩乐吧| www.835377.com-炫彩网络是什么东西| www.mo1.com-怎么认识快三走势图| www.468669.com-易彩票漏洞赚钱| www.mo49.com-七星彩开奖号码结果| www.4603.cm-广西体彩中心网站| www.0597.in-天天中彩票网站| www.090737.com-广西福彩网首页| www.5197.cm-韩国快三图-| www.615776.com-云购彩票犯法吗| www.1194.pw-彩票冷热趋势分析| www.5108.cm-天津体彩客服电话| www.133977.com-河南快三兑奖日| www.939335.com-88彩票开奖-| www.63716.com-足彩竞猜app实用| www.196728.com-彩票大厅开奖结果| www.278889.com-红牛彩票下载安装| www.515328.com-哪里买七星彩| www.35100.com-天下彩网站免费搜索| www.691571.com-彩乐乐的网址| www.789162.com-足球竞彩软件有哪些| www.876058.cc-安徽福彩快三爱乐彩| www.973391.com-256时彩-| www.ak20.com-安徽福彩快三走势| www.j43.org-中国福利彩票开奖号| www.48362.cc-可以竞彩足球的软件| www.14mc.com-腾讯308彩票网| www.1958.cc-附近竞彩网点查询| www.8787.love-彩6买什么版本好| www.713150.com-海南彩票41-| www.895645.com-四场进球彩推荐| www.166.tv-彩库宝典现场开张| www.092573.com-福建体育彩票下载| www.4bi.cc-移动梦网彩票直播版| www.089729.com-快乐彩走势图电脑版| www.184111.cc-快三属于赌博吗| www.321520.com-安徽一定牛快三遗漏| www.892972.com-彩票缩水过滤| www.970724.com-新浪体育足球彩票网| www.cai1699.com快三大小单双app| www.mh60.com-好彩网靠谱吗| www.16po.com-夫妻俩幻想中彩票| www.1280.me-中信彩票是骗钱的吗| www.01911.com-旺旺彩票腾讯| www.675940.com-体彩利润多少个点| www.783036.com-保定体彩吧-| www.876263.com-约彩彩票app| www.pe51.com-5分快三是不是假的| www.rz84.com-中彩票网app| www.qp43.com-福彩内部数据骗局| www.100855.com-给我下载乐彩网| www.98975.com-时时彩什么玩法划算| www.34ve.com-七星彩在-| www.39527.com-体彩排列五开将| www.00190.com-华彩传销-| www.081468.com-高兴彩票app下载| www.190779.com-怎样玩分分快三赢钱| www.507218.com-五彩滩-| www.576764.com-彩票壁纸-| www.419858.com-印象彩票网登录| www.100338.com-乐彩3d下载-| www.193428.com-大发快三规律吃人| www.667709.com-福彩十位震福| www.45237.com-675彩票平台| www.457430.com-中彩票的诗-| www.7554.vip-做个彩票网站多少钱| www.540048.com-李承红休闲快三教学| www.s39.net-3d福彩预测号| www.f71.pw-35彩票官方下载| www.2488.vip-江苏e球彩中奖奖金| www.03369.com-七星彩骗局会员| www.81720.com-快三怎么样注册| www.956539.com-老婆买彩票输了8万| www.fb.cc-河北快三开奖规则| www.990986.com-5分快三开奖| www.335978.com-彩票和值振幅走势图| www.454348.com-买彩票选几个数字| www.552040.com-万彩吧开奖查询结果| www.617552.com-自贡体彩中心地址| www.684000.com-中国竞彩网传统体彩| www.757676.com-腾讯一分彩-| www.823740.com-加盟三彩需要多少钱| www.883199.com-重庆高中生买彩票| www.yj0.cc-吉林快三开奖结果1| www.pr86.com-go彩平台-| www.03me.com-彩民周刊专家组小宋| www.79nl.com-67期福彩开奖| www.026229.com-快三免费计划app| www.2118.in-江苏福彩3g-| www.106435.com-彩77有安卓么| www.71qv.com-恒大时时彩正规吗| www.274718.com-大发时时彩开奖历史| www.409858.com-竞彩足球预测列表| www.797018.com-福利彩票多久过期| www.888814.cc-网易彩票资讯电脑版| www.jd52.com-彩票平台信用玩法| www.944686.com-彩票容错专家破解版| www.998553.com-中国体育彩票地图| www.og1.com-甘肃快三开奖今天的| www.41td.com-世界杯竞彩分析推荐| www.870362.com-河北快三中奖| www.17149.com-盈彩全天计划群| www.99909.com-国外国彩票中奖号码| www.122100.com-英国彩票开奖号码| www.5579.net-乐购彩下载-| www.98il.com-炫彩字体生成| www.34754.com-搜福彩三d开奖号| www.616044.com-体彩竞彩篮球4串4| www.742059.com-香港新星彩手机网址| www.ol7.com-快三顺龙投注技巧| www.40963.com-我想中彩票一等奖| www.73312.cc-818彩票-| www.117752.com-足彩比分气新浪| www.669088.com-神彩网吧-| www.699721.com-中国足彩网资讯| www.699790.com-彩神平台不给提现| www.882035.com-彩票工资车-| www.es24.com-彩神网站app下载| www.0182.xyz-百度网上彩票合法吗| www.111087.com-欧洲彩票中奖排行榜| 500万彩票www.357876.com| www.660904.com-飞鱼彩票走势图大全| www.946864.com-上海彩钢板生产厂家| www.999906.cc-网络彩票套路破解| www.bh53.com-易彩网是不是骗局| www.sj82.com-足球彩票规则介绍| www.950192.com-聚彩51app-| 趣彩网www.qucp8.com| www.ft82.com-宝马彩票app| www.127913.com-画彩虹-| www.238089.com-发彩网二维码| www.356214.com-每日足彩分析| www.7799.tv-体育彩票机选号码| www.149208.com-苹果彩票app软件| www.05zd.com-怎么在qq上买彩票| www.942566.com-博友彩是什么| www.186851.com-彩票分分快三稳赢| www.858401.com-快乐网快三的玩法| www.323216.com-家彩网关注码| www.1149.vip-重庆时时彩预测软件| www.272721.com-北单单场足彩| www.271359.com-好彩1走势图福彩网|