点击缩略图后,是否可以防止较大的图像失焦?
div.gallery img{
height: 70px;
width: 140px;
}
#LargeImage{
display: none;
height:100vh;
left:0px;
position:absolute;
top:0px;
width:100vw;
}
<div class="gallery"><img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg"onclick="PreloadImage(this)"></div>
<img src="" id="LargeImage" onclick="ShowThumbnail()">
{{1}}
答案 0 :(得分:0)
你在这里:
'use strict';
var my_image,
my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
y = document.getElementById('LargeImage');
function showImage(){
var stats = document.getElementById('stats'),
y = document.getElementById('LargeImage');
stats.innerHTML = 'Ready, rendering...';
while(!y.complete){
setTimeout(function() {showImage()}, 10);
}
y.style.display = 'block';
setTimeout(function() {stats.innerHTML = '';}, 3000);
}
function PreloadImage(theElement) {
var my_image,
my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
stats = document.getElementById('stats'),
y = document.getElementById('LargeImage');
stats.innerHTML = 'Loading...';
y.style.display = 'none';
my_image = new Image();
my_image.src = my_imageSrc;
y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
var y = document.getElementById('LargeImage');
y.style.display = 'none';
}
div.gallery img{
/*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
width: 140px;
}
#LargeImage{
display: none;
/*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
left:0px;
position:absolute;
top:0px;
width:100vw;
}
<div class="gallery">
<img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
</div>
<span id="stats"></span>
<img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">
一旦您的图片宽度高于高度,您只需要设置新的宽度,让浏览器使用新的高度进行操作
修改强>
如果您在大图像出现时不想要滚动条,请添加到您的css(考虑代码段范围):
/* this will avoid the scroll bar */
body{overflow:hidden}
编辑2
如果图像的宽度需要适合屏幕/页面:
'use strict';
var my_image,
my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',//https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg
y = document.getElementById('LargeImage');
function showImage(){
var stats = document.getElementById('stats'),
y = document.getElementById('LargeImage');
stats.innerHTML = 'Ready, rendering...';
while(!y.complete){
setTimeout(function() {showImage()}, 10);
}
y.style.display = 'block';
setTimeout(function() {stats.innerHTML = '';}, 3000);
}
function PreloadImage(theElement) {
var my_image,
my_imageSrc = 'https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg',
stats = document.getElementById('stats'),
y = document.getElementById('LargeImage');
stats.innerHTML = 'Loading...';
y.style.display = 'none';
my_image = new Image();
my_image.src = my_imageSrc;
y.src = my_imageSrc+"?"+Date.now();
}
function ShowThumbnail() {
var y = document.getElementById('LargeImage');
y.style.display = 'none';
}
div.gallery img{
/*height: 70px;*/ /* EDIT - commented to keep aspect ratio */
width: 140px;
}
#LargeImage{
display: none;
/*height:100vh;*/ /* EDIT - commented to keep aspect ratio */
left:0px;
position:absolute;
top:0px;
width:100%;
}
<div class="gallery">
<img src="https://cdn.spacetelescope.org/archives/images/large/heic1509a.jpg" onclick="PreloadImage(this)">
</div>
<span id="stats"></span>
<img src="" id="LargeImage" onclick="ShowThumbnail()" onload="showImage()">