http://codepen.io/Thisisntme/pen/rVRyJE是我网站的演示。目前，轮播在页面调整大小之前不起作用。我不知道如何修复那个......而且我也想知道如何让旋转木马具有最大宽度，这样它在桌面PC上就不会超大。（第一个问题是已经解决，所以我只需要大胆的帮助）
<body>
<div id="backgroundstuff">
<script type="text/processing" data-processing-target="canv">
//Create array of circles
float oldFPS = 0;
ArrayList<Circle> back = new ArrayList<Circle>();
int rand = random(0,255);
final int PARTICLES = 200;
void setup() {
smooth(1); //antialias
size(1000, 1000);
colorMode(HSB);
for (int i = 0; i < PARTICLES; i++) { //add circle objects to array
back.add(new Circle(
random(0, width), //x
random(0, height), //y
random(100, 200), //radius
random(0, 360), //direction circle is pointing in
random((80+rand)%255, (0+rand)%255), //hue
60 //opacity (alpha)
));
}
}
void draw() {
background(255); //clear
fill(0, 0, 255, 255);
for (int i = 0; i<back.size (); i++) {
back.get(i).render(1); //render circles input is speed
}
drawLines(back);
if(oldFPS!=frameRate){
console.log(frameRate);
}
oldFPS = frameRate;
}
public void drawLines(ArrayList<Circle> circles) {
stroke(0, 0, 0, 255);
for (int i = 0; i < circles.size ()-1; i++) {
Circle c = circles.get(i);//current circle
for (int z = i; z < circles.size (); z+=1) {
Circle f = circles.get(z); //other circle
if (distance(c.getX(), c.getY(), f.getX(), f.getY()) < 50) {
stroke(0, 0, 0, 255);
strokeWeight(2);
line(c.getX(), c.getY(), f.getX(), f.getY());
} else if(distance(c.getX(), c.getY(), f.getX(), f.getY()) < 100){strokeWeight(1);
stroke(0, 0, 0, 255);
line(c.getX(), c.getY(), f.getX(), f.getY());
}
}
}
}
public float distance(float a, float b, float c, float d) {
return sqrt(((a-c)*(a-c))+((b-d)*(b-d))); //a^2+b^2=c^2
}
public class Circle {
float xPos, yPos, rad, dir, hue, opacity;
public Circle(float x, float y, float radius, float direction, float inhue, float alpha) {
xPos = x;
yPos = y;
rad = radius;
dir = direction;
hue = inhue%255;
opacity = alpha;
}
public float getX() {
return xPos;
}
public float getY() {
return yPos;
}
public void render(float Speed) {
float dirRadian = radians(dir); //so I dont have to deal with radians.
if (yPos < 0 || yPos > width) { // bounce off top or bottom
dir*=-1;
dirRadian = radians(dir);
xPos += Speed*cos(dirRadian);
yPos += Speed*sin(dirRadian);
}
if (xPos < 0 || xPos > height) { //bounce off left or right
dir = 180-dir;
dirRadian = radians(dir);
xPos += Speed*cos(dirRadian);
yPos += Speed*sin(dirRadian);
}
fill(hue, 255, 255, opacity);
noStroke();
drawCircle(xPos, yPos, rad);
xPos += Speed*cos(dirRadian); //moveX
yPos += Speed*sin(dirRadian); //moveY
}
private void drawCircle(float xPos, float yPos, float rad) {
ellipse(xPos, yPos, rad, rad);
}
}
</script>
<canvas id="canv">
</canvas>
</div>
<div class="navbar">
<div class="container">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ART</a></li>
<li><a href="">MUSIC</a></li>
<li><a href="">STUFF</a></li>
<li><a href="">LINKS</a></li>
</ul>
</div>
</div>
<div class="mainTitle">
<div class="container">
<h1>Shane's Website!</h1>
</div>
</div>
<div class="gallery">
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/ART.JPG" alt="art"/>
</div>
<div class="gallery-cell">
<img src="https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/STUFF.jpg" alt="stuff"/>
</div>
<div class="gallery-cell">
</div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
<div class="CC">
<div class="container">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://licensebuttons.net/l/by-sa/4.0/88x31.png" /></a>
<br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/"> Creative Commons
Attribution-ShareAlike 4.0 International License. </a>
</div>
</div>
</body>
CSS
canvas {
outline: 0px;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: auto;
}
@font-face {
font-family: Avenir;
src: url("https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf");
}
body {
background-color: white;
overflow-x: hidden;
/*background-image: url("https://4c95d0ec6dcefe3d6c4d74191bd78c322c485be4.googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/BACKGROUND.jpg");*/
background-size: auto 140%;
}
/*NAVIGATIONAL PANEL*/
.navbar {
margin: 0px;
padding: 0px;
overflow: hidden;
width: 120%;
position: relative;
}
.navbar li {
list-style-type: none;
width: 100%;
font-family: Avenir;
src: url("https://googledrive.com/host/0Bxf7lERLL3TlfjlMT28zSU9RdUFqZ2ZzWlFyWFpKMzJIbUpBelFIUnlsbTVHVUlfNVJfaXc/Avenir-Book.ttf")
}
.navbar li a {
padding: 6px 0px 6px 0px;
float: left;
width: 16%;
text-align: center;
color: black;
background-color: rgba(255, 255, 255, .8);
border-radius: 40px;
font-size: 20px;
}
/*TITLE*/
.mainTitle {
margin: auto;
width: 100%;
padding: 6px 0px 6px 0px;
background-color: rgba(0, 0, 0, 0.85);
position: relative;
top: 20px;
}
.mainTitle h1 {
color: white;
font-family: Avenir;
font-size: 50px;
text-align: center;
}
.CC {
top: 500px;
font-family: Avenir;
position: relative;
background: rgba(255, 255, 255, .5);
border-radius: 5px;
rgba(255, 255, 255, .5);
float: left;
border: 3px solid black;
padding: 20px;
}
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.gallery {
padding: 50px 0px 0px 0px;
}
.gallery-cell {
width: 100%;
}
.gallery img {
width: 100%;
}
JS
var flkty = new Flickity('.gallery');
答案 0 :(得分：1)
关于轮播无法正常工作 如果您使用的是JQuery，可以在加载Carousel后尝试调用它：
$(window).resize()
如果没有jquery，你可以称之为
window.dispatchEvent(new Event('resize'));
这不会改变窗口的大小，但会触发调整窗口大小时调用的所有事件。
答案 1 :(得分：1)
.gallery {
max-width: 1400px;
margin: auto;
padding: 50px 0px 0px 0px;
}
我使用max width css来指定最大宽度。