飘浮盒子,随机色,随机宽高
来源:互联网 发布:大数据平台需求分析 编辑:程序博客网 时间:2024/05/21 17:33
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮框</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
background:black;
}
.div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#bigbox{
width: 1000px;
height: 500px;
margin: 60px auto;
position: relative;
border:1px solid #000;
overflow: hidden;
background: #ccc;
}
</style>
<body>
<div id="bigbox">
<div class="div"></div>
</div>
</body>
<script>
var div=document.getElementsByTagName('div')[1];
var x=1000;
var y=500;
var b=1;
var c=1;
var d=100;
var e=100;
var t=setInterval(move,5)
function move() {
if(div.offsetLeft+d>=x&&b>0||div.offsetLeft<=0&&b<0){
b=-b;div.style.background=bg();
div.style.width=Math.ceil(Math.random()*100)+"px";
div.style.height=Math.ceil(Math.random()*100)+"px";
d=parseInt(div.style.width);
e=parseInt(div.style.height);
}
if(div.offsetTop+e>=y&&c>0||div.offsetTop<=0&&c<0){
c=-c;div.style.background=bg();
div.style.width=Math.ceil(Math.random()*100)+"px";
div.style.height=Math.ceil(Math.random()*100)+"px";
d=parseInt(div.style.width);
e=parseInt(div.style.height);
}
div.style.marginLeft=div.offsetLeft+b+"px";
div.style.marginTop=div.offsetTop+c+"px";
}
function bg() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ',' + g + ',' + b + ")";
}
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>漂浮框</title>
</head>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
background:black;
}
.div{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#bigbox{
width: 1000px;
height: 500px;
margin: 60px auto;
position: relative;
border:1px solid #000;
overflow: hidden;
background: #ccc;
}
</style>
<body>
<div id="bigbox">
<div class="div"></div>
</div>
</body>
<script>
var div=document.getElementsByTagName('div')[1];
var x=1000;
var y=500;
var b=1;
var c=1;
var d=100;
var e=100;
var t=setInterval(move,5)
function move() {
if(div.offsetLeft+d>=x&&b>0||div.offsetLeft<=0&&b<0){
b=-b;div.style.background=bg();
div.style.width=Math.ceil(Math.random()*100)+"px";
div.style.height=Math.ceil(Math.random()*100)+"px";
d=parseInt(div.style.width);
e=parseInt(div.style.height);
}
if(div.offsetTop+e>=y&&c>0||div.offsetTop<=0&&c<0){
c=-c;div.style.background=bg();
div.style.width=Math.ceil(Math.random()*100)+"px";
div.style.height=Math.ceil(Math.random()*100)+"px";
d=parseInt(div.style.width);
e=parseInt(div.style.height);
}
div.style.marginLeft=div.offsetLeft+b+"px";
div.style.marginTop=div.offsetTop+c+"px";
}
function bg() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ',' + g + ',' + b + ")";
}
</script>
</html>
阅读全文
0 0
- 飘浮盒子,随机色,随机宽高
- js图片随机飘浮代码
- 随机
- 随机
- 随机
- 随机
- 随机
- 随机
- 《随机过程》学习笔记--高斯过程()
- 怎么设置随机色
- js设置随机色
- 盒子的真实宽高
- 飘浮
- java随机返回-----随机
- 随机打乱/随机发牌
- 高维空间中的高斯分布和随机投影
- 随机采样和随机模拟:吉布斯采样Gibbs Sampling实现高斯分布参数推断
- html生成随机色块
- android studio 报错问题汇集
- java二维数组
- 非块级元素的宽高设置
- LINUX_C编程实战—第十章《进程间的通信》-信号量
- C语言:编写一个函数实现一串字符串的左旋或者右旋
- 飘浮盒子,随机色,随机宽高
- 自定义View之Paint
- android中 dp->px和px->dp的工具方法
- C#初入CLR基础(一)
- 深入理解虚拟存储器(1:虚拟存储器概念与工作原理)
- Mac 10.12.6 下环境变量的配置。大坑套小坑。
- LINUX_C编程实战-《进程间的通信》-共享内存
- Docker挂载主机目录ls: cannot open directory .: Permission denied
- newinstance()和new有什么区别?