来源：未知 时间：2022-07-10 13:23 作者：小飞侠 阅读:次
[导读] js水波纹波动公式： angle+=0.01;varballScale=Math.sin(angle)*range; 效果如下: 全部代码如下: !DOCTYPEhtmlhtmlheadmetacharset=utf-8title波动/title/headbodyscripttype=text/javascriptvarball=document.createElement(div);ball.s...
|
js水波纹波动公式： angle += 0.01; var ballScale = Math.sin(angle) * range; 效果如下: 全部代码如下: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>波动</title>
</head>
<body>
<script type="text/javascript">
var ball = document.createElement('div');
ball.setAttribute('style', 'width:100px;height:100px;background:red;border-radius:50%;position:absolute;');
document.body.appendChild(ball);
var ball2 = document.createElement('div');
ball2.setAttribute('style', 'width:10px;height:10px;background:blue;border-radius:50%;position:absolute;');
document.body.appendChild(ball2);
var ball3 = document.createElement('div');
ball3.setAttribute('style', 'width:10px;height:10px;background:green;border-radius:50%;position:absolute;');
document.body.appendChild(ball3);
// 圆形
var ball4 = document.createElement('div');
ball4.setAttribute('style', 'width:15px;height:15px;background:red;border-radius:50%;position:absolute;');
document.body.appendChild(ball4);
var angle = 0;
var centX = 100;
var centY = 100;
var R = 60;
var range = 0.5;
function runing(){
// 1
angle += 0.01;
// var ballX = centX + moveX;
var ballScale = Math.sin(angle) * range;
// ball.style.left = ballX + 'px';
// ball.style.top = ballY + 'px';
//
ball.style.opacity = ballScale > 0 ? ballScale : 1+ballScale;
ball.style.transform = 'scale('+ballScale+')';
// console.log(ballScale)
window.requestAnimationFrame(runing);
}
runing();
</script>
</body>
</html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
