特效描述：jquery css3 交互式动画 弹出层展示特效。jquery win8风格交互式弹出层特效
代码结构
1. 引入CSS
2. 引入JS
3. HTML代码
(function(){
// Append a close trigger for each block
$('.menu .content').append('x');
// Show window
function showContent(elem){
hideContent();
elem.find('.content').addClass('expanded');
elem.addClass('cover');
}
// Reset all
function hideContent(){
$('.menu .content').removeClass('expanded');
$('.menu li').removeClass('cover');
}
// When a li is clicked, show its content window and position it above all
$('.menu li').click(function() {
showContent($(this));
});
// When tabbing, show its content window using ENTER key
$('.menu li').keypress(function(e) {
if (e.keyCode == 13) {
showContent($(this));
}
});
// When right upper close element is clicked - reset all
$('.menu .close').click(function(e) {
e.stopPropagation();
hideContent();
});
// Also, when ESC key is pressed - reset all
$(document).keyup(function(e) {
if (e.keyCode == 27) {
hideContent();
}
});
})();
5002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
