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.6188.live-彩圣字迷总汇今日| www.698775.com-彩铅落日风景画简单| www.662080.com-竞彩三串一-| www.783108.com-新星彩网址手机版| www.84xb.com-竞彩二选一玩法| www.700734.com-彩票可以异地兑奖码| www.806587.com-彩票开奖查询32期| www.930688.com-彩票上税-| 彩票控www.7777ae.com| www.15629.com-简单彩铅风景画视频| www.72607.com-彩迷天地报纸答案| www.777877.cc-福彩3d字迷牛彩冈| www.807480.com-福彩双色球守号技巧| www.633745.com-什么建盏能出七彩| www.513267.com-鸿彩一百可以提现吗| www.636078.com-彩虹6号围攻行动| www.731437.com-重庆福彩自助服务| www.817956.com-彩票晚上几点停售| www.906392.com-赌快3黑彩受害的人| www.981168.cc-福彩快三彩票可信吗| www.ck23.com-有一分快三的彩票| www.040228.com-彩票跟单合买应用| www.96189.com-石家庄福彩弃奖| www.78ee.com-银川彩票与你同行| www.886856.com-彩61平台-| www.969998.com-全国安全购彩| www.cai3266.com福彩新快3-| www.680900.com-买彩票欠下巨额| www.172578.com-11选5快三-| www.84166.cc-足彩14中9多少钱| www.084973.com-博乐快彩app| www.394681.com-青岛体彩兑奖| www.30mc.com-中国体彩啥时候开奖| www.12017.com-网上彩代理| www.em36.com-福彩3d幸运号| www.646.cn-大数据彩票快三| www.0910.net-买彩票神器中奖| www.994692.com-体彩扑克今天开奖| www.400949.com-七星彩有规律| www.567692.com-彩票搞笑图-| www.669632.com-海南七星彩网投| www.778990.com-第一彩票网-| www.637806.com-上海市体彩中心官网| www.137760.com-567彩票靠谱吗| www.21856.cc-用网络彩票套现| www.278110.com-快三输的倾家荡产| www.879633.com-北京新彩网合法吗| www.992971.com-中国足彩馆原创视频| www.az09.com-乐彩网3d走势| www.c29.top-互联网彩票迎重启| www.79ck.com-天吉彩票沦坛| www.2795.biz-743好彩软件| www.449823.com-沈阳福彩中心图片| www.gi.cc-河南快三推荐预测| www.108938.com-查彩票中奖的软件| www.14349.com-7k彩票网是正规| www.254618.com-福利彩票怎么买法| www.5676.cn-喝彩什么意思| 乐发彩票www.3136aa.com| www.208981.com-彩51彩票下载| www.578516.com-兰州市福彩中心电话| www.575515.com-福彩3d黑彩高手群| www.061776.com-好彩客提款提不了| www.25212.com-橙子彩铅手绘| www.65740.com-快三万能投倍器| www.pf93.com-新良数字彩-| www.702353.com-竞彩足球连续跟单输| www.qg04.com-308彩票丹麦28| www.235284.com-齐鲁七乐彩预测| www.41de.com-国庆节彩票放假| www.19861.cc-时时彩论坛高手绝学| www.167651.com-安徽快三基本走势图| www.967.date-杏彩网页登陆网址| www.bs83.com-时时彩缩水软件在线| www.yo84.com-体彩7往数-| www.46mb.com-网上体育彩票禁止| www.111216.com-御彩轩app收费| www.801746.com-福彩网官网-| www.hz6.com-快三顺龙技巧| www.967518.com-如何进微信彩票群| www.gw78.com-体彩排列三专家预测| www.285591.com-彩票外围网站哪个好| www.384201.com-彩票软件数据库| www.782424.com-易快三开奖结果| www.888004.com-彩票推荐网站哪个好| www.9628.net-彩色一字夹-| www.686824.com-爱开彩十一选五| www.781359.com-七星彩开奘直播| www.870619.com-152彩票安全吗| www.71rp.com-恒彩平台地址| www.3783.cc-七星彩双重多少组| www.092773.com-周口结婚彩礼多少钱| www.101871.com-红彩网络直播平台| www.190850.com-大发快三玩法心得| www.411130.com-凤vip彩票下载| www.377510.com-成都彩票店转让58| www.7139.com-星光购彩票官网平台| www.gp28.com-河南焦作彩礼价目表| www.s23.org-广东体彩网点| www.54rp.com-第九彩票是什么意思| www.i59.biz-南方双彩三d技巧| www.95ue.com-红彩app直播| www.63689.cc-齐齐哈尔彩票预测| www.348840.com-彩神预测-| www.0059.cn-哪种彩票奖最大| www.023557.com-福彩迷快三-| www.982379.com-分分时时彩开奖号码| www.096617.com-彩票到底能不能中奖| www.239800.com-福彩3d太假了| www.355343.com-买彩票必中神器| www.500400.cc-f彩网有保障吗| www.716576.com-手绘彩铅山水画| www.800511.com-卓易彩票倒闭| www.867808.com-彩票代打兼职怎么做| www.321738.com-七星彩梦册解码大全| www.389726.com-买足球彩票容易吗| www.518188.cc-彩票大优乐二等奖| www.8468.cc-欧洲杯彩票中奖图片| www.162509.com-爱彩乐重庆时时彩| www.024528.com-体彩快3规则| www.118074.com-中国彩宝品牌| www.43bn.com-游戏竞彩软件排行| www.1444.net-姐妹彩票-| www.987688.com-乐八彩票安卓| www.ml52.com-好彩网论坛实力三肖| www.29294.cc-彩虹频道app下载| www.617429.com-人人彩票资料大全| www.627678.com-分分彩五码-| www.93nk.com-买彩票怎么推算| www.356669.com-一日发彩票-| www.950554.com-体彩排列三分析预测| 500彩票www.50052m.com| www.118351.com-体彩中心官网首页| www.120861.com-专业彩吧助手走势图| www.709938.com-女孩叫你玩彩票| www.985365.com-哪家竞彩app好| www.mr4.com-内蒙古快三平台下载| 99彩票www.854277.com| www.506852.com-今天体彩奖号| www.16ys.cc-总幻想彩票中大奖| www.7472.cn-彩票店电话号码| www.412668.com-怎么自学彩票| www.49557.com-中国福彩36选7| www.447772.com-龙江福彩下载安装| www.22952.com-中彩那天教学设计| www.9339.pw-趣味彩球游戏| www.519811.com-南京众彩市场电话| www.597559.com-尊彩官网是骗人的吗| www.353466.com-京彩集团快3公式| www.030020.com-内蒙古体彩十一| www.129624.com-易众彩店下载| www.7929.xyz-一定牛快三湖北| www.021452.com-凤凰城娱乐彩票平台| www.113470.com-手机微信如何买彩票| www.9866.pw-古建彩绘颜料调配| www.872751.com-贵阳体彩申请| www.799.gg-就近体彩店-| www.5191.cc-彩报图谜第二版| www.458010.com-彩经彩票工具| www.092143.com-82彩票下载-| www.204196.com-彩票客户端-| www.703668.cc-998彩票app-| www.477920.com-综艺福彩合法吗| www.41gn.com-福彩开奖怎么看|