Javascript 扩展Div以适应比例图像_Javascript_Jquery_Html_Css

Javascript 扩展Div以适应比例图像

javascript jquery html css

Javascript 扩展Div以适应比例图像,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望div“expand”在悬停在上方时扩展到设置的高度，然后在鼠标悬停时恢复到div的原始高度我的问题是，“扩展”中的图像需要保持比例，因此其高度将根据浏览器宽度而变化因此，我需要一些代码（html、css、javascript、jQuery、PHP等），将div“expand”设置为在悬停时展开到预设的高度，然后恢复到图像的高度（加上四周的5像素填充）标记： <html> <head> <style> .expand{

我希望div“expand”在悬停在上方时扩展到设置的高度，然后在鼠标悬停时恢复到div的原始高度

我的问题是，“扩展”中的图像需要保持比例，因此其高度将根据浏览器宽度而变化

因此，我需要一些代码（html、css、javascript、jQuery、PHP等），将div“expand”设置为在悬停时展开到预设的高度，然后恢复到图像的高度（加上四周的5像素填充）

标记：

  <html>
    <head>
    <style>
    .expand{
        background-color: red;
        height: auto;
        padding: 5px;
        width: 18%;
    }
    </style>
    </head>
    <body>
    <div class="expand">
        <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
        <h3>The Demon King</h3>
        <h5>Cinda Williams Chima</h5>
        <p>jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'jfah;jfhe;jfhwehccneufhea'hfehechceiphf'</p>
    </div>
    </body>
  </html>


.扩大{
背景色：红色；
高度：自动；
填充物：5px；
宽度：18%；
}
魔王
辛达·威廉姆斯·奇玛
jfah；jfhe；jfhwehccneufhea'HFEHECHEIPHF'jfah；jfhe；jfhwehccneufhea'HFEHECHEIPHF'jfah；jfhe；jfhwehccneufhea'HFEHECHEIPHF'jfah；jfhe；jfhwehccneufhea'HFEHECHEIPHF'jfah；jfhe；jfhwehccneufhea'HFEHECHEIPHF'

您希望使用jQuery的

mouseover

和

mouseout

功能以及

动画

功能。您需要选择

div

并将函数绑定到其

onmouseover

事件。考虑下面的HTML<代码>正文< /代码>：

<div id="expand">
    <img src="http://yabooks.ml/Images/The Dmon King.jpg" style="width: 100%;">
    <h3>The Demon King</h3>
    <h5>Cinda Williams Chima</h5>
    <p>Text</p>
</div>

要使用

div

契约，您需要使用jQuery的

mouseout

函数绑定元素的

onmouseout

事件：

$("#expand").mouseout(function(){
  $( "#expand" ).animate({
    height: contracted
  }, time);
});

这种情况下的

mouseout

功能很难在jsiddle中演示，但希望以下jsiddle可以帮助您获得所需的行为：

您必须首先获得要扩展的

div

的原始高度，如下所示：

变量高度=$（“.expand”）.css（'height'）

并使用

设置div
的动画。将设置为所需的高度，比如说500px
：
$(".expand").on("mouseenter",function(){
    $(this).animate({"height":"500px"},"slow");
})

并将动画设置回原始高度：
var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
    $(this).animate({"height":height},"slow");
})

注意：确保关闭所有的标签。我注意到你的
没有关闭，这就是为什么你的
标签不会在div中包装。我已经修复了这个问题，在这个
中，我尝试了一个css修复，它不适用于比例图像。还有一点javascript，但我对语言不是很熟悉。图像是否也需要改变高度？如果没有，只需在悬停状态下设置固定高度，然后返回到非悬停状态的auto
。（或者“expand”是指动画？那么您必须使用jQuery或至少是JavaScript，因为仅使用CSS无法将height属性从固定值设置回auto
）动画。）或者您只是想最初隐藏文本内容并在悬停时显示它吗？然后，您可以通过显示：无
将其隐藏，并使其显示在悬停状态。（您可能需要涉及绝对定位，这样才不会影响布局的其余部分。）展开div时，图像不需要更改高度，但我无法设置固定高度，以便在鼠标悬停时将div返回，因为图像的高度取决于浏览器的大小。正如@CBroe所说，你只需要在悬停状态下声明expand div的宽度和高度，还需要在expand div内声明图像的高度（或宽度）（css应该是：。expand:hover img{width:（somewidth），height:auto}非常简单
var height = $(".expand").css('height');
$(".expand").on("mouseleave",function(){
    $(this).animate({"height":height},"slow");
})