js随机添加抖动的气泡

<style type="text/css">
		div{
			position: absolute;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			line-height: 50px;
			text-align: center;
			font-size: 12px;
			cursor: move;
		}
	</style>

// 点击按钮时,在页面内随机位置插入一个div,div的内容随机名字,div的背景是随机颜色.
// div默认会抖动,鼠标移入div时,div停止抖动,鼠标移开时,重新抖动,并且div还是可以拖拽.

	var oBtn=document.getElementById("btn");
	
	var winW=document.documentElement.clientWidth;
	var winH=document.documentElement.clientHeight;
	
	var arr=['佩奇','乔治','','猪爸爸','猪妈妈','苏西','艾米丽','苏怡','丹尼','坎迪','瑞贝卡','理查德','佩德罗','亚历山大']
	
	oBtn.onclick=function(){
		var oDiv=document.createElement("div");
		document.body.appendChild(oDiv);
		oDiv.style.left=getRandom(winW-50,0)+'px';
		oDiv.style.top=getRandom(winH-50,0)+'px';
		oDiv.innerText=arr[getRandom(arr.length,0)];
		oDiv.style.background=
		'rgb('+getRandom(256,0)+','+getRandom(256,0)+','+getRandom(256,0)+')';
		oDiv.timer=setInterval(dese(oDiv),20);
	}
	
	document.body.onmousedown=function (ev) {
		var ev=ev||window.event;
		var et=ev.target||ev.srcElement;
		if(et.nodeName=='DIV'){
			var disX=ev.clientX-et.offsetLeft;
			var disY=ev.clientY-et.offsetTop;
			document.onmousemove=function (ev) {
				var ev=ev||window.event;
				ev.preventDefault();
				et.style.left=ev.clientX-disX+'px';
				et.style.top=ev.clientY-disY+'px';
			}
			document.onmouseup=function () {
				document.onmousemove=null;
				document.onmouseup=null;
			}
		}
	}
			
	document.body.onmouseover=function (ev) {
		var ev=ev||window.event;
		var et=ev.target||ev.srcElement;

// 如果鼠标移入div,则清除这个div的定时器

		if(et.nodeName=='DIV'){
			clearInterval(et.timer);
		}
	}
	
	document.body.onmouseout=function (ev) {
		var ev=ev||window.event;
		var et=ev.target||ev.srcElement;
		//鼠标移开div,则重启这个div的定时器
		if(et.nodeName=='DIV'){
			et.timer=setInterval(dese(et),20);
		}
	}
	
	
	function dese(ele){
		return function () {
			ele.style.left=ele.offsetLeft+getRandom (2,-1)+'px';
			ele.style.top=ele.offsetTop+getRandom (2,-1)+'px';
		}			
	}
	
	//获取任意两个数之间的随机整数

	function getRandom (a,b){
		return Math.floor(Math.random()*(a-b)+b);
	}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值