jQuery:烟雾覆盖调整大小的图像
我想在图像上添加烟雾(自动调整用户屏幕宽度),是否有必要使用jQuery、CSS和HTML?非常感谢你。我将如何将它集成到这段代码中(我知道它是草率的)。我宁愿不使用任何外部文件。。。谢谢你的帮助jQuery:烟雾覆盖调整大小的图像,jquery,html,css,animation,Jquery,Html,Css,Animation,我想在图像上添加烟雾(自动调整用户屏幕宽度),是否有必要使用jQuery、CSS和HTML?非常感谢你。我将如何将它集成到这段代码中(我知道它是草率的)。我宁愿不使用任何外部文件。。。谢谢你的帮助 This is my HTML: <!DOCTYPE html> <html> <head> <style type="text/css"> #myCanvas{ background:black; max-width:
This is my HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myCanvas{
background:black;
max-width: 100%;
opacity: .5;
}
img{
position: absolute;
left:0;
max-width: 100%;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
// Create an array to store our particles
var particles = [];
// The amount of particles to render
var particleCount = 160;
// The maximum velocity in each direction
var maxVelocity = 2;
// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;
// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 1366;
var canvasHeight = 768;
// Create an image object (only need one instance)
var imageObj = new Image();
// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
particles.forEach(function(particle) {
particle.setImage(imageObj);
});
};
// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.blog.jonnycornwell.com/wp-content/uploads/2012/07/Smoke10.png";
// A function to create a particle object.
function Particle(context) {
// Set the initial x and y positions
this.x = 0;
this.y = 0;
// Set the initial velocity
this.xVelocity = 0;
this.yVelocity = 0;
// Set the radius
this.radius = 5;
// Store the context which will be used to draw the particle
this.context = context;
// The function to draw the particle on the canvas.
this.draw = function() {
// If an image is set draw it
if(this.image){
this.context.drawImage(this.image, this.x-128, this.y-128);
// If the image is being rendered do not draw the circle so break out of the draw function
return;
}
// Draw the circle as before, with the addition of using the position and the radius from this object.
this.context.beginPath();
this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
this.context.fillStyle = "rgba(0, 255, 255, 1)";
this.context.fill();
this.context.closePath();
};
// Update the particle.
this.update = function() {
// Update the position of the particle with the addition of the velocity.
this.x += this.xVelocity;
this.y += this.yVelocity;
// Check if has crossed the right edge
if (this.x >= canvasWidth) {
this.xVelocity = -this.xVelocity;
this.x = canvasWidth;
}
// Check if has crossed the left edge
else if (this.x <= 0) {
this.xVelocity = -this.xVelocity;
this.x = 0;
}
// Check if has crossed the bottom edge
if (this.y >= canvasHeight) {
this.yVelocity = -this.yVelocity;
this.y = canvasHeight;
}
// Check if has crossed the top edge
else if (this.y <= 0) {
this.yVelocity = -this.yVelocity;
this.y = 0;
}
};
// A function to set the position of the particle.
this.setPosition = function(x, y) {
this.x = x;
this.y = y;
};
// Function to set the velocity.
this.setVelocity = function(x, y) {
this.xVelocity = x;
this.yVelocity = y;
};
this.setImage = function(image){
this.image = image;
}
}
// A function to generate a random number between 2 values
function generateRandom(min, max){
return Math.random() * (max - min) + min;
}
// The canvas context if it is defined.
var context;
// Initialise the scene and set the context if possible
function init() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
// Set the context variable so it can be re-used
context = canvas.getContext('2d');
// Create the particles and set their initial positions and velocities
for(var i=0; i < particleCount; ++i){
var particle = new Particle(context);
// Set the position to be inside the canvas bounds
particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
// Set the initial velocity to be either random and either negative or positive
particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
particles.push(particle);
}
}
else {
alert("Please use a modern browser");
}
}
// The function to draw the scene
function draw() {
// Clear the drawing surface and fill it with a black background
context.fillStyle = "rgba(0, 0, 0, 0.5)";
context.fillRect(0, 0, 1366, 768);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
// Update the scene
function update() {
particles.forEach(function(particle) {
particle.update();
});
}
// Initialize the scene
init();
// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
setInterval(function() {
// Update the scene befoe drawing
update();
// Draw the scene
draw();
}, 1000 / targetFPS);
}
});//]]>
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body class=' wsite-theme-light'>
<div id="wrapper">
<div class="bg-wrapper">
<div id="header">
<div id="sitename" class="sitetitle">ZOMBIEZ, A UNIQUE GAMEMODE</div>
</div>
<div id="startcontainer">
<script type="text/javascript" src="/files/theme/smoke_effect.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/files/theme/smoke_effect.js"></script>
<img id="mainscreenimage" src="http://gamershavennews.com/wp-content/uploads/2011/12/gm_construct0003.jpeg" alt="" />
<canvas id="myCanvas" width="1366" height="768"></canvas>
<div id="DIV_1">
<a href="#content" id="A_2"></a>
</div>
</div>
<div id="content-wrapper">
<div id="content">
<div id="intro">
<script type="text/javascript">
(function() {
var img = document.getElementById('startcontainer').firstChild;
var height = $(window).height();
img.onload = function() {
if(img.height > img.width) {
//img.height = '100%';
img.height = height;
img.width = 'auto';
}
};
}());
</script>
</div>
{content}
</div>
</div>
</div>
<div id="footer">
<div id="footer-content">{footer}</div>
</div>
</div>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
</body>
</html>
这是我的HTML:
#我的画布{
背景:黑色;
最大宽度:100%;
不透明度:.5;
}
img{
位置:绝对位置;
左:0;
最大宽度:100%;
}
//=画布宽度){
this.xVelocity=-this.xVelocity;
x=画布宽度;
}
//检查是否已越过左边缘
else if(此.x=画布高度){
this.yVelocity=-this.yVelocity;
y=画布高度;
}
//检查是否已越过顶部边缘
否则,如果(这个,y)
僵尸,一种独特的游戏模式
(功能(){
var img=document.getElementById('startcontainer').firstChild;
var height=$(window.height();
img.onload=函数(){
如果(img.高度>img.宽度){
//img.height=‘100%’;
img.height=高度;
img.width=‘自动’;
}
};
}());
{content}
{footer}
{title}
{menu}
您需要最大宽度:100%
来调整图像大小
CSS
将“最大宽度”更改为100% 即
到目前为止你尝试过什么?我尝试过使用这个提琴,但没有成功。我发布了我的代码,你知道我需要如何整合它,使烟雾笼罩在图像上吗?我以为它有效,但不是出于某种原因,我更新了mu代码。我不知道为什么它不起作用,我几乎做了与提琴中完全相同的事情。@Jordi--在调用脚本之前,您必须将jQuery库放入
标记中。这是非常基本的。非常感谢您让我度过了美好的一天:)
#myCanvas{
background:black;
max-width: 100%;
opacity: .5;
}
img{
position: absolute;
left:0;
max-width: 100%;
}
max-width: 100%;