gpt4 book ai didi

javascript - 如何在 javascript/html 中调整图像大小

转载 作者:行者123 更新时间:2023-11-30 16:27:10 25 4
gpt4 key购买 nike

<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 750px;
width: 100%;
margin-top:-10px;
background-color:#0d0d0d;
position: relative;
z-index: 1;
}
</style>


<body>
<!-- <img id="image" src="img/bg.jpg" height="710px" width="100%" /> -->
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;

</script>
</head>

<script type="text/javascript">
var imlocation = "img/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'

var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
var insert = imlocation + randomimage();
document.write("<img src='" + insert+ "'>");
</script>
<div id="content"></div>

</body>

我正在尝试将插入图片的高度设置为 710 像素,将宽度设置为 100%。我做错了什么?

我试过编辑 insert.height 和 insert.width 但这似乎不起作用。

最佳答案

首先,您的代码没有正确运行,原因如下:

image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'

var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])

可能会注意到,缺少分号意味着您上面的每个语句都没有关闭。上面应该变成:

image = new ImageArray(6);
image[0] = 'bg.jpg';
image[1] = 'bg2.jpg';
image[2] = 'bg3.jpg';
image[3] = 'bg4.jpg';
image[4] = 'bg5.jpg';
image[5] = 'bg6.jpg';

var rand = 60/image.length;
function randomimage() {
currentdate = new Date();
image_number = currentdate.getSeconds();
image_number = Math.floor(image_number/rand);
return(image[image_number]);

如果您在解决此问题后有任何错误,请告诉我,然后我会相应地改进我的答案! :)

第 2 部分:

取而代之的是:

var insert = imlocation + randomimage();
insert.height = "710px";
insert.width = "100%";
document.write("<img src='" + insert+ "'/>");

让我们使用 CSS,我们有两个选择:

选项 1 - 使用样式属性:

var insert = imlocation + randomimage();
document.write("<img style='height:710px;width:100%' src='" + insert + "'/>");

选项 2 - 使用类

var insert = imlocation + randomimage();
document.write("<img class='ourclass' src='" + insert + "'/>");

为了完成选项 2,我们现在在 CSS 中定义“ourclass”:

.ourclass {
height:710px;
width:100%
}

关于javascript - 如何在 javascript/html 中调整图像大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33932831/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com