【发布时间】：2020-12-08 07:00:09
【问题描述】：
我有一个包含许多数字的内联块。 每个图都包含一张不同大小的图像，全部以 90% 的比例显示和一个标题。 每个图形都有 mouseenter 和 mouseleave 函数。 在 mouseenter 上，我将图像的高度从 90% 更改为 80%（并且在 mouseleave 上反转）
这会在图形宽度变化时产生令人不快的闪烁，并且可以在鼠标不断进入和离开移动图形时设置持续闪烁。
我可以控制图形的宽度吗？ （Figure.width不想玩）
有一个点击事件可以隐藏除此图之外的所有内容并缩放此图；可以的。
下面的完整程序，包括点击事件。
我尝试在更改图像高度后捕获并保留图形的宽度，但无法使其正常工作。 我的尝试在第 85 行及以下的代码中可见。
<head>
<style>
figure {
display: inline-block;
}
figure.awfigure {
height: 190px;
margin:0px;
border-style: solid;
border-color:green;
}
figcaption::after{
content: attr(after);
font-size:75%;
color: rgb(3, 68, 130);
float: right;
margin-left: 5px;
}
img.awthumb {
height: 90%;
margin:0px;
}
#container1 {
text-align: center;
}
</style>
<body>
<h1>This row is a <div</h1>
<div id="container1">
<figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/PageMainPics/Raffle_Tickets.jpg" alt="Latest Update." class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
<figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/clubpics/BobM.jpg" alt="Latest Update. - President Bob McKenzie" class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
<figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/clubpics/DSC_4723_edited-2.jpg" alt="Irene Stuart has joined the Orkney Club after many years of work in the Community supporting charities." class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
<figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/clubpics/Golf16.jpg" alt="Ally Bruce wins the annual golf competition, seen here receiving the award from last years winner Ronnie Johnson." class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
</figure><figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/clubpics/Coffee_Morning_Stromness.jpg" alt="Latest Update. - Stromness Coffee Event" class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
</figure><figure class="awfigure">
<img src="https://www.rotary-ribi.org/upimages/clubpics/Coffee_Morning_Stromness.jpg" alt="Latest Update. - Stromness Coffee Event" class="awthumb" />
<figcaption align="center"></figcaption>
</figure>
</div>
<script>
/* set up mouse enter, leave anf click on each figure*/
let figures = document.querySelectorAll( '.awfigure' );
for ( var i = 0; i < figures.length; i = i + 1 )
{
let thisfig = figures[ i ];
thisfig.parentElement.popped = false; /*no figurse currently clicked*/
thisfig.addEventListener( "mouseenter", function ()
{
if ( ! this.parentElement.popped )
{
captions = this.getElementsByTagName( 'FIGCAPTION' );
captions[ 0 ].innerHTML = "";/*there is only one caption*/
captions[ 0 ].setAttribute( 'after', " - Click to Open. " );
this.style.borderColor = "red";
thumbs = this.getElementsByTagName( 'IMG' );
/*Attempting to save and recover the figure's width - doesn't work
/* capture width of figure before change height of image*/
let x=this.width;
/*Change height of image in this figure*/
thumbs[0].style.height = "80%"; /*there is only one img*/
/* restore width of figure after changing height of image */
this.style.width=x;
}
} )
thisfig.addEventListener( "mouseleave", function ()
{
if ( ! this.parentElement.popped )
{
captions = this.getElementsByTagName( 'FIGCAPTION' );
captions[ 0 ].innerHTML = "";
captions[ 0 ].setAttribute( 'after', "" );
thumbs = this.getElementsByTagName( 'IMG' );
thisthumb=thumbs[0];
thisthumb.style.height = "90%";
this.style.borderColor = "green";
this.style.height = "190px";
}
} )
thisfig.addEventListener( "click", function ()
{
var thumbs = this.getElementsByTagName( 'IMG' );
var thisthumb=thumbs[0];
captions = this.getElementsByTagName( 'FIGCAPTION' );
var thiscaption=captions[0];
if ( this.parentElement.popped )
{
awhidesibs( 'awfigure', 'inline-block' ,'awfigure');
this.style.height = "190px";
thisthumb.style.height = "90%";
thiscaption.innerHTML = "";
thiscaption.setAttribute( 'after', " - Click to Open. " );
this.parentElement.popped = false;
}
else
{
awhidesibs( 'awfigure', 'none' ,'awfigure');
this.style.display="inline-block";
this.style.height = "400px";
thisthumb.style.height = "90%";
thiscaption.innerHTML = thisthumb.alt;
thiscaption.setAttribute( 'after', " - Click to Close. " );
this.parentElement.popped = true;
}
} )
}
function awhidesibs( x, y,z ) /*when figure clicked hide all other figures*/
{
var siblings = document.getElementsByClassName(x);
for ( var i = 0; i < siblings.length; i = i + 1 )
{
btn = siblings[ i ];
if( btn.className.includes(x))
{btn.style.display = y;}
}
}
</script>
【问题讨论】：
-
答案 1（谢谢）很简洁，但忽略了用户能够单击该图以查看更大版本的需要。为简洁起见，我在代码中省略了这一点，但完整的代码在上面。
标签： javascript width