我有一个网页,其中包含一个网格内的图像库。我希望页面自动从库中选择一个图像并运行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;
}