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.96633.com-福彩积分换彩| www.131295.com-彩中彩怎么下载| www.259724.com-京东快彩是什么| www.0334.loan-彩虹的约定儿歌下载| www.953619.com-中免红好彩什么味道| www.075352.com-达人彩票不靠谱| www.268196.com-下载爱博彩票app| www.08140.com-体彩竟彩打票教程| www.wh87.com-彩票曲线图怎么看| www.005309.com-彩之云app下载| www.333609.com-做彩票的公司| www.457744.com-代理广东福彩中心| www.556983.com-买彩票真有中奖的吗| www.29sm.com-往年彩票中奖号码| www.044329.com-足彩让球规则详解| www.89970.com-七彩视界怎么用不了| www.249967.com-中彩网客户终端下载| www.476199.com-福彩号码中奖号码| www.945127.com-吉林快三和值号| www.g06.cn-海南私彩论坛| www.6111.live-彩票20选5走势图| www.39334.com-时时彩攻略技巧集锦| www.030083.com-大地彩app下载| www.180053.com-快3福彩网app| www.38hl.com-手绘彩铅花卉教程| www.7644.net-香港时时三分彩网站| www.193523.com-关于长春逸彩快三| www.340229.com-玄武彩票骗局| www.919242.com-时时彩平台搭建开发| www.fu65.com-彩票计划是骗局吗| www.5kk.cc-刘军彩票视频| www.542425.com-福彩网是什么东西| www.657375.com-彩票两元网排三| www.736418.com-双彩图3g-| www.817452.com-23彩票安全吗| www.884613.com-彩票开奖查询地方彩| www.954234.com-三地彩票-| 好彩头www.51331k.com| www.597775.com-彩票怎么完税| www.44xe.com-彩虹7号是什么游戏| www.0070.top-双色500彩票| www.32oe.com-赛狗pk8彩票平台| www.359738.com-时时彩跑马计划软件| www.507256.com-彩神争霸网页登录| www.612609.com-巴西三分彩官网| www.684800.com-富贵彩票-| www.811716.com-双彩网pk10-| www.950675.com-江苏快三高手论坛| 大赢家彩票平台www.082712.com| www.wt92.com-福彩人人中彩票| www.4110.cm-苏州快三线路线图| www.21816.cc-送彩金88-| www.87287.cc-三快uu彩票-| www.104075.com-官方网彩票香港| www.286845.com-快三带线走势图| www.382112.com-彩票一天下-| www.505218.com-优惠彩金网址| www.602011.com-今日3p晒彩票专家| www.705623.com-彩票外省能兑奖吗| www.818839.com-足球竞彩丸子二串| www.927038.com-彩票达人三五个尾巴| 网易彩票www.506931.com| www.d95.club-竞彩足球8串1全包| www.299.pink-足彩跟单app| www.5164.tv-怎样买足彩稳赢| www.21259.cc-体彩订票下载| www.77038.com-华东福彩l5选5| www.054829.com-3d通福彩计算软件| www.495141.com-博彩代理赚钱吗| www.171250.com-今天上海快三开奖号| www.522655.com-龙虎彩票出号规律| www.416348.com-uc彩票能提款吗| www.577524.com-中国福彩赛车pk拾| www.744779.com-类似于彩6的平台| www.866419.com-搜狐彩票站-| www.954690.com-下载体彩大乐透| www.cp769.com-分分快三哪个平台好| www.72bu.com-梦见彩票没有中奖| www.5552.in-彩票内部书籍| www.44638.com-福建省福利彩栗网| www.042156.com-体彩竞彩中奖规则| www.132529.com-世界杯足彩专家分析| www.239500.cc-谁有快三qq群| www.369240.com-开彩吧app-| www.071014.com-广东彩票365| www.883012.com-投彩是什么意思| www.25321.cc-彩铅绘画教程| www.24692.cc-鲸鱼彩铅画教程| www.040070.com-如何彩票开奖查询| www.312721.com-天水快三开奖| www.mp84.com-彩神争官方网站| www.563588.com-q彩apk-| www.441079.com-天津体彩app注册| www.086565.com-最好的快开彩平台| www.904477.com-5oo万彩票网即时| www.92100.com-顺丰彩票官网| www.109120.com-欧洲百万彩票官网| www.829201.com-口袋彩票官方网站| www.el34.com-彩票代玩兼职| www.985928.com-足彩推荐最准的专家| www.9226.biz-够力彩票奖表| www.121591.com-网恋遇到赌彩票| www.cp2879.com-新快三玩法说明| www.55bl.com-七星彩局王2018| www.535144.com-大同电子邮箱彩票| www.br24.com-时时彩豹子出号规律| www.792906.com-百宝彩票青海快3| www.177251.com-三分快三有计划| www.035920.com-快三一天开几期| 大赢家彩票平台www.307683.com| www.5389.cm-彩票777好不好| www.36693.com-澳彩是澳门盘吗| www.505146.com-9万彩票官网苹果版| www.678739.com-今日竞彩必发指数| www.5uv.com-玩网彩输了一万| www.509266.com-宝利彩票安全吗| www.4523.biz-中国福利彩票035| www.00477.com-彩票齐中网-| www.376218.com-彩立子-| www.693679.com-学买彩票-| www.904567.com-三d福利彩票和值| www.968645.com-微信群有人带时时彩| 购彩在线www.66332l.com| www.844498.com-福彩大奖组-| www.547516.com-彩票数据采集接口| www.68916.com-天天彩票助手论坛| www.767579.com-牛彩网图谜总汇| www.993839.com-新浪彩票19006| www.604607.com-160彩票-主页| www.788973.com-竞彩飞龙在天推单| www.358213.com-易经破解七星彩| www.572741.com-香港本地彩票app| www.387672.com-温州市体彩兑奖中心| www.375411.com-七星彩现场电视台| www.5105.me-吉安彩票头奖| www.33140.com-彩500vip-| www.9kt.cc-北京快三彩票网点| www.555520.com-跟神彩奕奕类似的词| www.439.in-提前预知彩票结果| www.22218.cc-足彩预测专家| www.134798.com-缅甸好彩双爆一包| www.05.biz-体彩导报在线阅读| www.033499.com-彩站宝业主版| www.880506.com-淘宝能不能买彩票| www.062753.com-竞彩专家推荐分析| www.194011.com-青海快三今天开奖| www.554698.com-七星彩四位数组合| www.746738.com-七星彩历史开奖号| www.tx99.com-江苏快三坑人| www.833334.com-彩票店二维码哪里找| www.656.in-北京时时彩群| www.867616.com-算局七星彩-| www.501571.com-3d和值网易彩票| www.042977.com-今日3d彩民乐图| www.32108.com-香港百姓彩坛| www.se15.com-重庆时时彩龙虎和| www.100079.cc-畅赢彩票-| www.xx1.com-七乐彩大发快三网址| www.2as.cc-彩晶膜多少钱| www.0889.org-彩站宝官网客服电话| www.17192.com-彩票店可以买什么车| www.069601.com-亚彩会登陆最新版| www.662038.com-南通体彩中心领奖| www.781974.com-东成西就彩票|