I love fishc
告诉我tellme{:5_91:}
学习
1
!!!
打卡
怪，这个帖子隐藏了什么呢？
不如放点课上写的网站好了
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 = document.createElement("div");
OBall.setAttribute("class", "ball");
var cirR = 30 * random(0) + 10;
OBall.style.width = cirR * 2 + "px";
OBall.style.height = cirR * 2 + "px";
OBall.style.background = "radial-gradient(circle," + "rgba(255,222,0,0.6)" + "," + "rgba(255,222,0,0)" + ")";
mdAttr.appendChild(OBall);
OBall.onclick = function () {
if (cirR > 20) {
// click_a = true;
top.location.href = "/yellowpage";
document.removeChild(OBall);
}
if (cirR < 20) {
// click_a = true;
top.location.href = "/yellowpage";
document.removeChild(OBall);
}
}
OBall.startX = W * (random(0) - 0.5) * 0.4 + 0.5 * W;
OBall.startY = H * (random(0) - 0.5) * 0.4 + 0.5 * H;
OBall.Vx = 2 * random(0);
OBall.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%;
}
1