[英]Simple JavaScript OnClick Function
I'm finally getting round to creating a website for my print design portfolio. 我终于要为我的印刷设计作品集创建一个网站。 I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have.... 我确切地知道我要实现的目标,但是对于Web设计来说还是一个新手,我发现我所拥有的知识有一些局限性。
I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. 我已经使用css3转换(目前它们仅在Chrome和Safari中可用)来制作可在悬停时触发的翻页卡-这些功能非常完美,而且正是我想要的。 All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. 我现在想要做的就是添加一个JavaScript函数(使用jQuery),该函数可以在点击时永久翻转卡片。 I don't want it to disable the on hover function which is pure css though. 我不想让它禁用纯css的悬停功能。
I have found this extremely difficult to implement. 我发现这很难实施。
The site is here: 该站点在这里:
www.samueljamesdesign.com www.samueljamesdesign.com
Any help would be greatly appreciated. 任何帮助将不胜感激。
Just modify your CSS so that the rotation is also triggered by adding a class. 只需修改CSS,以便通过添加类来触发旋转。 For example, change this rule: 例如,更改此规则:
#card-container:hover .front {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
To this: 对此:
.card-container:hover .front,
.card-container.selected .front,{
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
}
Note that you cannot use #card-container
, as it is invalid to have multiple elements with the same ID in the document. 请注意,您不能使用#card-container
,因为在文档中具有多个具有相同ID的元素是无效的。 Set card-container
as the class instead. 而是将card-container
设置为class。
To make things stay flipeed when clicked, with your new CSS, you do: 为了使单击时的内容保持翻转,使用新的CSS,您可以执行以下操作:
var tiles = $('#tiles .card-container');
tiles.click(function() {
tiles.removeClass('selected');
$(this).addClass('selected');
//To change the image in maincontent to match the
//one in the flipcard clicked on:
$('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.