如何使用Javascript进行图像缩放
我正在做一个网络项目,需要制作一个图片库。当点击时,图像需要放大。但在我的代码中,只有第一幅图像可以缩放 我怎样才能让它们都变焦 下面是我的源代码如何使用Javascript进行图像缩放,javascript,html,css,Javascript,Html,Css,我正在做一个网络项目,需要制作一个图片库。当点击时,图像需要放大。但在我的代码中,只有第一幅图像可以缩放 我怎样才能让它们都变焦 下面是我的源代码 <!DOCTYPE html> <html> <head> <style> #myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } #myImg:hover {opacity: 0.7;} .modal
<!DOCTYPE html>
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close" id="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
function openModal(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementById('close');
// When the user clicks on <span> (x), close the modal
function close() {
modal.style.display = "none";
}
span.addEventListener("click", close);
img.addEventListener("click", openModal);
</script>
</body>
</html>
#myImg{
边界半径:5px;
光标:指针;
过渡:0.3s;
}
#myImg:hover{opacity:0.7;}
.莫代尔{
显示:无;/*默认情况下隐藏*/
位置:固定;/*保持原位*/
z指数:1;/*位于顶部*/
填充顶部:100px;/*框的位置*/
左:0;
排名:0;
宽度:100%;/*全宽*/
高度:100%;/*全高*/
溢出:自动;/*根据需要启用滚动*/
背景色:rgb(0,0,0);/*回退色*/
背景色:rgba(0,0,0,0.9);/*黑色w/不透明度*/
}
/*模态内容(图像)*/
.模态内容{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
}
/*模态图像字幕*/
#标题{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
文本对齐:居中;
颜色:#ccc;
填充:10px0;
高度:150像素;
}
/*添加动画*/
.模式内容#标题{
-webkit动画名称:缩放;
-webkit动画持续时间:0.6s;
动画名称:缩放;
动画持续时间:0.6s;
}
@-webkit关键帧缩放{
来自{-webkit变换:缩放(0)}
到{-webkit转换:缩放(1)}
}
@关键帧缩放{
来自{transform:scale(0)}
到{变换:比例(1)}
}
.结束{
位置:绝对位置;
顶部:15px;
右:35px;
颜色:#f1f1;
字体大小:40px;
字体大小:粗体;
过渡:0.3s;
}
.关闭:悬停,
.结束:聚焦{
颜色:#bbb;
文字装饰:无;
光标:指针;
}
@仅介质屏幕和(最大宽度:700px){
.模态内容{
宽度:100%;
}
}
&时代;
关闭模态的元素
var span=document.getElementById('close');
//当用户单击(x)时,关闭模式对话框
函数close(){
modal.style.display=“无”;
}
span.addEventListener(“单击”,关闭);
img.addEventListener(“单击”,OpenModel);
不要使用ID使用类。例如使用
.caption
而不是
#caption
不要使用ID使用类。例如使用
.caption
而不是
#caption
id
名称在整个网页中必须是唯一的。否则,选择器将仅对第一个选择器起作用
为了让选择器在多个元素上工作,classes
where发明。您应该将代码更改为:
[...]
<img id="myImg1" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
[...]
注意我如何将散列(#
)更改为点(
)
散列表示按id选择,点表示按类选择。你应该对每件事都遵循同样的原则。Id何时是唯一的,类何时是多个的
现在我们将在JS中按类进行选择:
/*[...]*/
// Select all the images by class
var imgs = document.querySelectorAll('.myImg');
// Loop the array and add the logic to each one
imgs.forEach(function(img) {
img.addEventListener("click", openModal);
});
/*[...]*/
id
名称在整个网页中必须是唯一的。否则,选择器将仅对第一个选择器起作用
为了让选择器在多个元素上工作,classes
where发明。您应该将代码更改为:
[...]
<img id="myImg1" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
<img id="myImg2" class="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">
[...]
注意我如何将散列(#
)更改为点(
)
散列表示按id选择,点表示按类选择。你应该对每件事都遵循同样的原则。Id何时是唯一的,类何时是多个的
现在我们将在JS中按类进行选择:
/*[...]*/
// Select all the images by class
var imgs = document.querySelectorAll('.myImg');
// Loop the array and add the logic to each one
imgs.forEach(function(img) {
img.addEventListener("click", openModal);
});
/*[...]*/
您正在为dom单击使用
id
。Id是唯一的。最好对选择器使用ClassName
,而不是Id
。尝试使用和指定click event all image元素
//获取模式
var modal=document.getElementById('myModal');
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.querySelectorAll('.myImg');
var modalImg=document.getElementById(“img01”);
var captionText=document.getElementById(“caption”);
函数openModal(){
modal.style.display=“块”;
modalImg.src=this.src;
captionText.innerHTML=this.alt;
}
//获取关闭模态的元素
var span=document.getElementById('close');
//当用户单击(x)时,关闭模式对话框
函数关闭(){
modal.style.display=“无”;
}
span.addEventListener(“单击”,关闭);
img.forEach(a=>a.addEventListener(“单击”,OpenModel))代码>
#myImg{
边界半径:5px;
光标:指针;
过渡:0.3s;
}
#myImg:悬停{
不透明度:0.7;
}
.莫代尔{
显示:无;
/*默认情况下隐藏*/
位置:固定;
/*原地不动*/
z指数:1;
/*坐在上面*/
填充顶部:100px;
/*盒子的位置*/
左:0;
排名:0;
宽度:100%;
/*全宽*/
身高:100%;
/*全高*/
溢出:自动;
/*如果需要,启用滚动*/
背景色:rgb(0,0,0);
/*退色*/
背景色:rgba(0,0,0,0.9);
/*黑色w/不透明度*/
}
/*模态内容(图像)*/
.模态内容{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
}
/*模态图像字幕*/
#标题{
保证金:自动;
显示:块;
宽度:80%;
最大宽度:700px;
文本对齐:居中;
颜色:#ccc;
填充:10px0;
高度:150像素;
}
/*添加动画*/
.模态内容,
#标题{
-webkit动画名称:缩放;
-webkit动画持续时间:0.6s;
动画名称:缩放;
动画持续时间:0.6s;
}
@-webkit关键帧缩放{
从{
-webkit变换:缩放(0)
}
到{
-webkit转换:缩放(1)
}
}
@关键帧缩放{
从{
变换:缩放(0)
}
到{
变换:缩放(1)
}
}
.结束{
位置:绝对位置;
顶部:15px;
右:35px;
颜色:#f1f1;
字体大小:40px;
字体大小:粗体;
过渡:0.3s;
}
.关闭:悬停,
.结束:聚焦{
颜色:#bbb;
文字装饰:无;
光标:指针;
}
@仅介质屏幕和(最大宽度:700px){
.模态内容{
宽度:100%;
}
}
&时代;
您正在为dom单击使用id
。Id是唯一的。最好对s使用ClassName