问题描述
我正在使用https://www.kirupa.com/html5/the_falling_snow_effect.htm中的代码，事实证明，整个页面都在下雪，不仅仅是横幅div ...
// Array to store our SNowflake objects
var sNowflakes = [];
// Global variables to store our browser's window size
var browserWidth;
var browserHeight;
// Specify the number of sNowflakes you want visible
var numberOfSNowflakes = 50;
// Flag to reset the position of the sNowflakes
var resetPosition = false;
// Handle accessibility
var enableAnimations = false;
var reduceMotionQuery = matchMedia("(prefers-reduced-motion)");
// Handle animation accessibility preferences
function setAccessibilityState() {
if (reduceMotionQuery.matches) {
enableAnimations = false;
} else {
enableAnimations = true;
}
}
setAccessibilityState();
reduceMotionQuery.addListener(setAccessibilityState);
//
// It all starts here...
//
function setup() {
if (enableAnimations) {
window.addEventListener("DOMContentLoaded",generateSNowflakes,false);
window.addEventListener("resize",setResetFlag,false);
}
}
setup();
//
// Constructor for our SNowflake object
//
function SNowflake(element,speed,xPos,yPos) {
// set initial sNowflake properties
this.element = element;
this.speed = speed;
this.xPos = xPos;
this.yPos = yPos;
this.scale = 1;
// declare variables used for sNowflake's motion
this.counter = 0;
this.sign = Math.random() < 0.5 ? 1 : -1;
// setting an initial opacity and size for our sNowflake
this.element.style.opacity = (.9 + Math.random()) / 3;
}
//
// The function responsible for actually moving our sNowflake
//
SNowflake.prototype.update = function() {
// using some trigonometry to determine our x and y position
this.counter += this.speed / 5000;
this.xPos += this.sign * this.speed * Math.cos(this.counter) / 40;
this.yPos += Math.sin(this.counter) / 40 + this.speed / 30;
this.scale = .5 + Math.abs(10 * Math.cos(this.counter) / 20);
// setting our sNowflake's position
setTransform(Math.round(this.xPos),Math.round(this.yPos),this.scale,this.element);
// if sNowflake goes below the browser window,move it back to the top
if (this.yPos > browserHeight) {
this.yPos = -50;
}
}
//
// A performant way to set your sNowflake's position and size
//
function setTransform(xPos,yPos,scale,el) {
el.style.transform = `translate3d(${xPos}px,${yPos}px,0) scale(${scale},${scale})`;
}
//
// The function responsible for creating the sNowflake
//
function generateSNowflakes() {
// get our sNowflake element from the DOM and store it
var originalSNowflake = document.querySelector(".sNowflake");
// access our sNowflake element's parent container
var sNowflakeContainer = originalSNowflake.parentNode;
sNowflakeContainer.style.display = "block";
// get our browser's size
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
// create each individual sNowflake
for (var i = 0; i < numberOfSNowflakes; i++) {
// clone our original sNowflake and add it to sNowflakeContainer
var sNowflakeClone = originalSNowflake.cloneNode(true);
sNowflakeContainer.appendChild(sNowflakeClone);
// set our sNowflake's initial position and related properties
var initialXPos = getPosition(50,browserWidth);
var initialYPos = getPosition(50,browserHeight);
var speed = 5 + Math.random() * 40;
// create our SNowflake object
var sNowflakeObject = new SNowflake(sNowflakeClone,initialXPos,initialYPos);
sNowflakes.push(sNowflakeObject);
}
// remove the original sNowflake because we no longer need it visible
sNowflakeContainer.removeChild(originalSNowflake);
moveSNowflakes();
}
//
// Responsible for moving each sNowflake by calling its update function
//
function moveSNowflakes() {
if (enableAnimations) {
for (var i = 0; i < sNowflakes.length; i++) {
var sNowflake = sNowflakes[i];
sNowflake.update();
}
}
// Reset the position of all the sNowflakes to a new value
if (resetPosition) {
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
for (var i = 0; i < sNowflakes.length; i++) {
var sNowflake = sNowflakes[i];
sNowflake.xPos = getPosition(50,browserWidth);
sNowflake.yPos = getPosition(50,browserHeight);
}
resetPosition = false;
}
requestAnimationFrame(moveSNowflakes);
}
//
// This function returns a number between (maximum - offset) and (maximum + offset)
//
function getPosition(offset,size) {
return Math.round(-1 * offset + Math.random() * (size + 2 * offset));
}
//
// Trigger a reset of all the sNowflakes' positions
//
function setResetFlag(e) {
resetPosition = true;
}#sNowflakeContainer {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.sNowflake {
position: fixed;
background-color: #ffffff;
user-select: none;
z-index: 1000;
pointer-events: none;
border-radius: 50%;
width: 10px;
height: 10px;
}<div class="mainbanner">
<div id="sNowflakeContainer">
<span class="sNowflake"></span>
</div>
<br>
<center>
<p class="topText" style="font-size:8vw;"> Welcome to the ultimate <br>sleepover experience</p><br><br><br>
<p class="topText" style="font-size:4vw;"> By Ultimate Teepee Party</p>
<br><br><br>
<a class="btn_1" href="book.html">Book Your Party</a></center>
</div>必须要有一种方法使其仅显示在该横幅div内部而不是整个页面内？
解决方法
如果您通过检查元素查看snow demo page，您将意识到作者将整个html页面而不是使用div嵌入到页面中，即javascript <SVGPie PieData="@PieData" height="200" width="300"></SVGPie>
<SVGDoughnut PieData="@PieData"></SVGDoughnut>
@code
{
private List<PieDataModel> PieData = new List<PieDataModel>();
protected override void OnInitialized()
{
GenerateSamplePieData();
base.OnInitialized();
}
private void GenerateSamplePieData()
{
PieDataModel PDM = new PieDataModel();
PDM.Color = "#ff0000";
PDM.Name = "Section 1";
PDM.Percent = 30.0;
PieData.Add(PDM);
PDM = new PieDataModel();
PDM.Color = "#ffff00";
PDM.Name = "Section 2";
PDM.Percent = 20.0;
PieData.Add(PDM);
PDM = new PieDataModel();
PDM.Color = "#0000ff";
PDM.Name = "Section 3";
PDM.Percent = 20.0;
PieData.Add(PDM);
PDM = new PieDataModel();
PDM.Color = "#00ff00";
PDM.Name = "Section 4";
PDM.Percent = 30.0;
PieData.Add(PDM);
}
}
是指浏览器宽度，因此，除非修改JS，否则该页面只能在整个页面中使用，由于相对位置处理不当，因此我认为原始代码没有任何效果。指的是以下工作演示，它使您可以在整个页面中显示积雪。如果只希望将效果应用于某个元素，请尝试根据元素位置修改脚本计算。或者您可以执行作者的操作，将文档嵌入整个页面中
browserHeight = document.documentElement.clientHeight