0 0 1 6 - 分组分段元素

RC1300603763 · 发表于 2021-10-25 10:30:10

I love fishc

红tea少年 · 发表于 2022-1-21 21:44:39

告诉我tellme

月下饮酒影独醉 · 发表于 2022-5-8 08:51:23

学习

甲鱼护甲锻造师 · 发表于 2022-5-23 23:32:10

ShmilyLee · 发表于 2022-5-24 14:04:00

longweixu · 发表于 2023-7-24 21:37:33

打卡

易改乌江水 · 发表于 2023-9-22 22:56:58

怪，这个帖子隐藏了什么呢？
不如放点课上写的网站好了
index.html

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset = "utf-8">
<title>Welcome to the my blog!</title>
<link href="study.css" rel="stylesheet">
</head>
<body>
<div id = "introduction">
<p id = "me">白月松江，晚霞秋霜，小生易改乌江水</p>
<div class = "a_element" id = "ball_caller">
<a>main_page</a>
</div>
</div>
<div id = "main_page">
</div>
<script src="study.js"></script>
</body>
</html>

复制代码

study.js

var call = document.getElementById("ball_caller");
var click_a = true
call.onclick = function my(){
if (click_a){
//获取浏览器窗口宽高
var W,H;
W = document.documentElement.clientWidth;
H = document.documentElement.clientHeight;
var mdAttr = document.createDocumentFragment();
var OBall = [];//小球对象数组
OBall[0] = document.createElement("div");
OBall[0].setAttribute("class", "ball");
var cirR = 30 * random(0) + 10;
OBall[0].style.width = cirR * 2 + "px";
OBall[0].style.height = cirR * 2 + "px";
OBall[0].style.background = "radial-gradient(circle," + "rgba(255,222,0,0.6)" + "," + "rgba(255,222,0,0)" + ")";
mdAttr.appendChild(OBall[0]);
OBall[0].onclick = function () {
if (cirR > 20) {
// click_a = true;
top.location.href = "/yellowpage";
document.removeChild(OBall[0]);
}
if (cirR < 20) {
// click_a = true;
top.location.href = "/yellowpage";
document.removeChild(OBall[0]);
}
}
OBall[0].startX = W * (random(0) - 0.5) * 0.4 + 0.5 * W;
OBall[0].startY = H * (random(0) - 0.5) * 0.4 + 0.5 * H;
OBall[0].Vx = 2 * random(0);
OBall[0].Vy = 2 * random(0);
document.body.appendChild(mdAttr);
click_a = false;
//运动
~function fn() {
window.onresize = function () {
W = document.documentElement.clientWidth;
H = document.documentElement.clientHeight;
};
OBall.forEach(function (ball) {
var MaxH = H - ball.offsetHeight,
MaxW = W - ball.offsetWidth;
ball.startX += ball.Vx;
ball.startY += ball.Vy;
if(ball.startX+ball.Vx >= MaxW || ball.startX+ball.Vx <=0){
ball.Vx *= -1.25*(0.8*random(0)+0.4);
if(Math.abs(ball.Vx)>0.3*MaxW)
{
ball.Vx = Math.sign(ball.Vx)*0.3*MaxW;
}
ball.startX = Math.max(ball.Vx,ball.startX+ball.Vx);
ball.startX = Math.min(ball.startX+ball.Vx,MaxW+ball.Vx);
}
if(ball.startY+ball.Vy >= MaxH || ball.startY+ball.Vy <=0){
ball.Vy *= -1.25*(0.8*random(0)+0.4);
if(Math.abs(ball.Vy)>0.3*MaxH)
{
ball.Vy = Math.sign(ball.Vy)*0.3*MaxH;
}
ball.startY = Math.max(ball.Vy,ball.startY+ball.Vy);
ball.startY = Math.min(ball.startY+ball.Vy,MaxW+ball.Vy);
}
ball.style.left = ball.startX + "px";
ball.style.top = ball.startY + "px";
});
requestAnimationFrame(fn);//循环
}();
}
function random(min,max){
return Math.random()+min;
}
}

复制代码

study.css

@charset "utf-8";
html,body{
height : 100%;
font-family: sans-serif;
}
body{
background:url(background.png) center 4vw;
background-size:cover;
margin: 0;
padding:0;
position: relative;
font-family: Tahoma, sans-serif;
}
#introduction{
position: absolute;
top:15%;
left: 50%;
width:80%;
text-align:center;
transform: translate3d(-50%,-50%,0);
color:#000000;
background:rgba(192,172,98, 0.7);/*#39C5BB;*/
/*background-color: #c0ac62;*/
border:1px solid #9d8d51;
border-radius: 40px;
text-decoration: none;
}
#me{
font-family: KaiTi, sans-serif;
font-size:42px;
margin-bottom:22px;
}
.a_element{
position:relative;
font-size: 23px;
height: auto;
width: 30vw;
left: 50%;
transform: translate3d(-50%,0,0);
background: rgba(51,150,150,0.9);
color:#FFF;
border:1px solid rgb(51,136,136);
border-radius: 20px;
padding:10px 5px;
text-align: center;
}
.ball {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: radial-gradient(circle, #fff, #fff600);
border-radius: 50%;
}

复制代码

孙忠亮 · 发表于 2023-10-9 16:33:08

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 1 6 - 分组分段元素

浏览过的版块