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天

知道了
彩票123现在叫什么名字 www.702424.com-还能买竞彩的app| www.050993.com-彩票任务代打| www.823679.com-印花彩涂铝板| www.my80.com-做福彩赚钱还是体彩| www.06oh.com-可以购彩票软件下载| www.248180.com-彩票99安卓-| www.368345.com-明月七星彩怀孕番外| www.381612.com-肥城市福利彩票站点| www.22513.com-齐鲁风采彩票不带0| www.78ko.com-国外专业足彩| www.678219.com-福彩3d黄金独胆| www.h78.club-福彩3d彩吧图谜| www.729859.com-九鼎彩票app下载| www.839165.com-体育彩票3d推荐号| www.987107.com-购彩堂下载安装| www.ca03.com-彩票7乐彩开奖号码| www.619150.com-刮刮彩中奖真实图片| www.767537.com-票彩票开奖结果| www.884182.com-乐盈彩票可靠吗| www.8629.biz-金七乐彩票走势图| www.fm80.com-福彩3d跨度30期| www.35hw.com-台湾福星彩图库资料| www.wb39.com-qq彩票在哪-| www.931304.com-8彩票网-| www.996551.com-快乐彩12开奖号码| www.aw32.com-江西快三玩法介绍| www.ua34.com-九六凤凰彩-| www.se07.com-亚投彩票是什么| www.xx45.com-彩票停售-| www.726562.com-安全可靠的买彩票| www.825554.com-河北众乐快三| www.922786.com-彩色纸箱厂家| www.984212.com-内蒙古快三和值图表| www.hb23.com-老猫看彩3d-| www.07ll.com-彩票高返奖平台| www.197735.com-安然七星彩专家预测| www.079892.com-网络彩票玩法介绍| www.96az.com-靓彩印刷厂怎么样| www.635696.com-彩库宝典网址| www.720112.com-快三近五期开奖号码| www.800010.cc-福彩下期预测最准确| www.576743.com-教你看快三走势| www.420777.com-查七乐彩走势图| www.518594.com-福彩开奖最新| www.271151.com-8亿彩官方下载网址| www.569411.com-福利彩票简单玩法| www.663187.com-中圄竞彩网首页| www.772372.com-时时彩赢了不能提现| www.871707.com-苏州体彩兑奖中心| www.818984.com-七星彩最新预测| www.965245.com-中国体育彩票买法| www.cai999.cc-快三算法-| www.pe02.com-足彩澳门即时盘| www.570388.com-七彩虹显卡好吗| www.571573.com-福利彩票直播| www.088046.com-亿彩票app-| www.181537.com-人人快三-| www.151014.com-三d开奖结果彩助手| www.228292.cc-开封彩礼-| www.108545.com-玩高频彩成功的人| www.071165.com-火山彩票-| www.pl87.com-大发时时彩人工计划| www.pw06.com-长城彩票购彩大厅| www.ew24.com-最新时时彩助手| www.191077.com-快三一等奖奖金多少| www.14ek.com-99彩登陆平台登录| www.158001.cc-带加奖的体彩app| www.326717.com-排三南方双彩试机号| www.344404.com-709彩票中奖福地| www.368862.com-凤凰彩票怎么注销| www.478984.com-大发购彩-| www.581576.com-彩塔808-| www.657338.com-游乐园彩票机玩法| www.722350.com-体育彩票中国红| www.919249.com-七星彩内部资料直码| 500彩票www.50024g.com| www.gn47.com-河南体彩开奖结果| www.0233.me-必赢快3彩票| www.038304.com-天天彩票集团app| www.713263.com-体彩7位数开奖查询| www.979959.com-买彩票快三-| www.fz41.com-福利彩票发行中心| www.4054.cc-彩虹六号墨冰多少钱| www.571184.com-福彩六等奖多少钱| www.958852.com-生日彩票计算器| www.082039.com-恒博彩票是真的吗| www.172081.com-快三怎样看走势图| www.v84.com-快三炒群-| www.674.me-七星彩晚上几点停售| www.772199.com-时时彩任三混合技巧| www.g73.biz-七星彩十专家预测| www.170.me-时时彩真的我输怕了| www.544908.com-粤淘彩票邀请码| www.325448.com-海南体彩-| www.421023.com-刚力彩芽红吗| www.537975.com-什么是国彩投资| www.620255.com-彩钢瓦价格表| www.707744.com-足彩比分计算器| www.791731.com-时时彩租平台| www.909450.com-河北福彩快三彩经网| www.235062.com-中彩那天的原文| www.328432.com-福彩购买平台| www.414541.com-彩之云是什么| www.522200.com-8k彩票多少人中过| www.166568.com-快三彩票app| www.275566.com-彩票166-| www.392533.com-搜抓彩票-| www.560595.com-博金彩票站官方网站| www.636038.com-500万彩票客服| www.696560.com-网易彩票头-| www.vh11.com-约约彩票app| www.54co.com-福利彩票中奖案| www.15ce.com-老腾讯分分彩走势| www.371408.com-万福彩票网站| www.365596.cc-彩铅表现技法| 全民汇彩票www.52303c.com| www.678470.com-彩票开奖采集接口| www.793602.com-288彩票是真是假| www.877808.com-五星彩票下载安装| www.024224.com-福彩机器快3视频| www.221180.com-湖北一定牛彩票| www.287972.com-中国福利彩票开奖3| www.366832.com-qq易迅版彩票| www.07259.com-彩色混凝土着色地坪| www.870416.com-安全可靠网购彩票| www.8372.pw-七星彩福星长条| www.99284.cc-网易彩票还能买| www.301023.com-棋牌游戏平台送彩金| www.31wj.com-网络竞彩投资骗局| www.06gj.com-彩铅调色教程图解| www.52cf.cc-简单水彩画入门风景| www.0198.xyz-中国福彩有几种彩种| www.999416.com-拉萨今日开奖号快三| www.7900.org-霍金彩票公式解析| www.334521.com-河北快三冷号| www.wd47.com-辽宁快三一天多少期| www.59sf.com-体彩优秀销售员| www.502961.com-福彩3d今天预测号| www.571887.com-福彩通图标-| www.459688.com-彩票最多中过多少钱| www.w23.space-诺亚彩票注册| www.08eq.com-好看的彩铅简单风景| www.956082.com-万豪彩票助手苹果版| 大赢家彩票平台www.109307.com| www.jf06.com-从业博彩客服判几年| www.xp04.com-彩票app下载送钱| www.93383.cc-山东福彩彩友论坛| www.152838.com-福彩12远5-| www.42aj.com-彩库宝典安软下载| www.523725.com-时时彩后二预测软件| www.4160.top-七彩电商-| www.007077.com-彩票开重号-| www.084665.com-欢乐彩app下载| www.065905.com-必赢彩票登录| www.127423.com-迪士尼彩票为人类建| www.02vc.com-彩虹什么意思| www.591451.com-澳客彩网比分直播| www.952964.com-广东新粤彩报| www.525522.com-彩票中奖收多少税| www.616435.com-彩七七苹果下载| www.678329.com-福彩3d长投计划| www.93xz.com-摩纳哥三分彩可靠吗| www.3154.top-中国福彩投诉电话| www.68047.com-五分彩是赌博吗|