我有一个网页,其中包含一个网格内的图像库。我希望页面自动从库中选择一个图像并运行css动画,如放大照片。图像必须随机选择,并在页面加载库后自动运行。
只是想说一句:
访问:<http://codepen.io/DouglasGlover/pen/zHBid/>
在上面的链接是一个小画廊,图像放大悬停。我不希望悬停形成动画,相反,我希望动画在没有悬停的情况下发生。希望有人能帮忙。提前谢谢。

最佳答案

您可以将hover类添加到悬停规则中,然后在页面加载时添加javascript代码以选择随机图像并将hover类添加到其中。

// Getting a random index for the list of images that are on the page.
var index = Math.floor((Math.random() * $('.photo-image').length));

// Adding class hover to trigger the hover action.
$($('.photo-image')[index]).addClass('hover');

.photo-image:hover,
.photo-image.hover
{
  width:200px;
  top:-50px;
  left:-50px;
  z-index:1001;
  opacity:1;
}

10-05 20:47
查看更多