onresize浏览器窗口大小改变大小时触发
一个球运动
Animation.gif
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
#radius{
position: relative;
width: 60px;
height: 60px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="radius"></div>
<script type="text/javascript">
var oDiv = document.getElementById( 'radius' ),
space = 5, //
space2 = 5,
Top = 0,
Left = 0,
winTop = document.documentElement.clientHeight,
winLeft = document.documentElement.clientWidth,
maxTop,maxLeft,
R = oDiv.offsetHeight, //获取div的直径
maxTop = winTop-R,
maxLeft = winLeft-R;
window.onresize = function (){ //onresize 监听窗口有没有变化
winTop = document.documentElement.clientHeight; //获取可视内容的高度
winLeft = document.documentElement.clientWidth; //获取可视内容的宽度
maxTop = winTop-R,
maxLeft = winLeft-R;
}
!function move(){
Top += space; //原来加上速度
Left += space2; //原来加上速度
console.time(1);
if( Top > maxTop || Top < 0 ){
/*
如果Top加到 > maxTop 那么Top>maxTop 就为真
假如 500 500 450 min就取450
500 500 450 max就取450
如果Top减到 <0 那么 Top < 0 变为真；
假如 -2 -2 450 min就取-2
-2 -2 0 max就取0
*/
Top = Math.min( Top , maxTop );
Top = Math.max( Top , 0);
space = -space;
oDiv.style.backgroundColor = changeColor();
}
/*
if( Top > maxTop ){
Top = maxTop;
num = -num;
oDiv.style.backgroundColor = changeColor();
}
if( Top < 0 ){
Top = 0 ;
num = -num;
oDiv.style.backgroundColor = changeColor();
}
*/
if( Left > maxLeft || Left < 0 ){
Left = Math.min( Left , maxLeft );
Left = Math.max( Left , 0);
space2 = -space2;
oDiv.style.backgroundColor = changeColor();
}
/*
if( Left > maxLeft ){
Left = maxLeft;
num2 = -num2;
oDiv.style.backgroundColor = changeColor();
}
if( Left < 0 ){
Left = 0 ;
num2 = -num2;
oDiv.style.backgroundColor = changeColor();
}
*/
oDiv.style.top = Top +'px';
oDiv.style.left = Left+'px';
requestAnimationFrame(move);
}();
// 随机颜色
function changeColor(){
var r = Math.floor( Math.random()*256),
g = Math.floor( Math.random()*256),
b = Math.floor( Math.random()*256);
return 'rgb('+r+','+g+','+b+')';
}
</script>
</body>
多个球运动
Animation.gif
<style type="text/css">
/*清除样式*/
*{margin: 0;padding: 0;}
ul li{list-style-type: none;}
a{text-decoration: none; color: inherit;}
/*---------------------------------------------------*/
.box{
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border-radius: 50%;
}
</style>
</head>
<body>
<script>
!function (){
// 创建盒子
createBox(20);
function createBox(n){
for (var i = 0; i < n; i++) {
var box = document.createElement( 'div' );
box.className = 'box';
box.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
box.speed = 1+Math.floor(Math.random()*10); //定义一个speed（速度）自定义属性 定义随机速度
box.speed2 = 1+Math.floor(Math.random()*10);
box.Top = 0; //定义一个top（位置初始值）自定义属性 定义随机速度
box.Left = 0;
document.body.appendChild( box );
console.log( Math.floor(Math.random()*100) );
}
}
// 获取window宽高 和 初始值
var oBox = document.getElementsByTagName( 'div' ),
winWidth = document.documentElement.clientWidth,
winHeight = document.documentElement.clientHeight,
R = oBox[0].offsetWidth,
maxTop = winHeight - R,
maxLeft = winWidth - R;
//监听窗口变化函数
window.onresize = function (){
winWidth = document.documentElement.clientWidth;
winHeight = document.documentElement.clientHeight;
maxTop = winHeight - R;
maxLeft = winWidth - R;
}
//球运动函数
!function autoPlay(){
var length = oBox.length;
for (var i = 0; i < length; i++) {
var ball = oBox[i]; //把取到的oBox[i]存起来
ball.Top += ball.speed; //每个盒子的速度
ball.Left += ball.speed2;
if( ball.Top > maxTop || ball.Top < 0 ){
ball.Top = Math.max( ball.Top , 0 );
ball.Top = Math.min( ball.Top , maxTop );
ball.speed = -ball.speed;
ball.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
}
if( ball.Left > maxLeft || ball.Left < 0 ){
ball.Left = Math.max( ball.Left , 0 );
ball.Left = Math.min( ball.Left , maxLeft );
ball.speed2 = -ball.speed2;
ball.style.background = '-webkit-radial-gradient(center , #fff,'+changeColor()+')';
}
ball.style.top = ball.Top + 'px';
ball.style.left = ball.Left + 'px';
}
// setAnimation( autoPlay , 1000/60);
setAnimation( autoPlay);
}();
// 随机颜色
function changeColor(){
var r = Math.floor( Math.random()*256),
g = Math.floor( Math.random()*256),
b = Math.floor( Math.random()*256);
return 'rgb('+r+','+g+','+b+')';
}
// 动画兼容
function setAnimation( fn ){
return window.requestAnimationFrame ? requestAnimationFrame( fn ):setTimeout( fn , 1000/60 )
}
}()
</script>
</body>
网友评论