Question

我正在为我的网站制作css悬停图片。因此，当人们上传他们的图像并查看缩略图时，他们可以滚动它们并查看完整图像。我的问题出现在定位悬停的图像时。其中一些是垂直的，一些是水平的，它们需要以不同的方式定位，因此它们不会与缩略图重叠。

尝试解决这个问题我虽然在jQuery中抓取高度是最容易的，然后根据高度它是垂直的，然后使用.css()函数向上移动。然而，似乎我在检索图像高度时遇到问题。我知道我可以为每个图像指定高度属性，但我有点想避免由于高度变化（如果它是垂直或水平的）。

我在jsFiddle中构建了一个小例子，试图让它更容易解决问题。 http://jsfiddle.net/nYC6C/2/

我的html看起来像这样，除了循环遍历所有图像。

<ul class="imgLinks intImg enlarge">
  <loop code here>
  <li class="widImg">
    <p class="imgContain">
       <span class="fImg">
        <a  target="_blank"  title="cat" href="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" target="_blank"/>
       </a>
         <form>
          <input type="submit" class="notification badgeInput badge badge-important" name="" value="X"  />
         </form>
       </span>

       <p class="imgTitle">Title</p>
       <p class="imgTitle imageNum" style="padding-top: 0; line-height: 10px;"></p>
     </p>
    <img class="largeImg" src="http://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Van_cat%2C_Van%2C_Turkey_1973.jpg/702px-Van_cat%2C_Van%2C_Turkey_1973.jpg" />

  </li>
  <end loop code>
 </ul>

和我一直在玩的jQuery。

$('.largeImg').each(function(i) {
    var num = i + 1;
  console.log('image'+ num + ' '+ $(this).height());
});

任何帮助都会很精彩！

Answer 1

尝试从缩略图的底部对齐它，如果它的高度相同，则可以将hover-large-image设置为底部距离而不是顶部。

它会是这样的。

    ul.enlarge li:hover .largeImg{ 
bottom: 190px;
left: 0;}

FIDDLE

Answer 2

你可以试试这个。

$('.largeImg').each(function(i) {
    var imgSize = $(this).height();
    if(imgSize > xpixelsize){ //xpixelsize is basically what pixel you want 400px lets say
     //do this
   }else {
     //do this
   }
});

希望这会让你走上一条有用的道路！

Answer 3

当您将鼠标悬停在.widImg上时，我采用了查找图像高度/宽度的方法，然后查看它是否长于宽度。如果是，您可以应用您需要的css / class，如果没有，您可以不管它或更改您需要更改的内容：

$('.widImg').hover(function() {
    var $image = $(this).find('.largeImg');
    var height = $image.height();
    console.log(height);
    if(height > $image.width()) {
        //do something for vertical images
        console.log('vertical');
    } else {
        console.log('horizontal');
    }
});

Updated fiddle.

Answer 4

您调整大图片的大小，然后尝试测量它你应该删除max-width;测量项目。

ul.enlarge .largeImg
{
   max-height: 15em;
   max-width: 15em;
}

jQuery抓取图像的高度来检查是否有一定的高度

4 个答案: