通过图库网格自动播放动画

Question

我有一个页面，其中包含网格内的图像库。我希望页面自动从库中选择一个图像并运行像放大照片的CSS动画。必须随机选择图像，并在页面加载图库后自动运行。

只是想一个主意： 访问：<http://codepen.io/DouglasGlover/pen/zHBid/>
在上面链接是一个小画廊，图像在悬停时放大。我不希望悬停形成动画，而是我希望动画在没有悬停的情况下发生。希望有人能提供帮助。提前谢谢。

Answer 1

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

＆＃13;

＆＃13;

// 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');

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;