|
.rb-grid li:nth-child（1） .rb-week > div:nth-child（3） { background： #297AA3; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（4） { background： #256E93; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（5） { background： #216283; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（6） { background： #1D5672; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（7） { background： #184962; }
.rb-grid li:nth-child（1） .rb-week > div:nth-child（8） { background： #143D52; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（1） { background： #33CCCC; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（2） { background： #2DB4B4; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（3） { background： #29A3A3; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（4） { background： #259393; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（5） { background： #218383; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（6） { background： #1D7272; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（7） { background： #186262; }
.rb-grid li:nth-child（2） .rb-week > div:nth-child（8） { background： #145252; }
最后但并非最不重要，让我们用小屏幕来检验。当空间有限，我们就不希望在网格中显示盒子了：
@media screen and （max-width： 63.125em） {
.rb-grid li，
.rb-grid li.rb-span-2，
.rb-grid li.rb-span-4 {
width： 100%;
height： 10em;
text-align： left;
}
.rb-grid li［class^=“icon-”］：before，
.rb-grid li［class*=“ icon-”］：before {
font-size： 6em;
left： auto;
right： 0;
line-height： 2.5;
}
.rb-grid li > div {
text-align： center;
}
}
JAVASCRIPT：
var $items = $（ ‘#rb-grid > li’ ），
transEndEventNames = {
‘WebkitTransition’ ： ‘webkitTransitionEnd’，
‘MozTransition’ ： ‘transitionend’，
‘OTransition’ ： ‘oTransitionEnd’，
‘msTransition’ ： ‘MSTransitionEnd’，
‘transition’ ： ‘transitionend’
}，
// transition end event name
transEndEventName = transEndEventNames［ Modernizr.prefixed（ ‘transition’ ） ］，
// window and body elements
$window = $（ window ），
$body = $（ ‘BODY’ ），
// transitions support
supportTransitions = Modernizr.csstransitions，
// current item‘s index
current = -1，
// window width and height
winsize = getWindowSize（）;
当点击每个条目时，如果不支持过渡效果，就会跳过第一个状态并且叠加效果会立即扩展。
initEvents（） {
$items.each（ function（） {
var $item = $（ this ），
$close = $item.find（ ‘span.rb-close’ ），
$overlay = $item.children（ ‘div.rb-overlay’ ）;
$item.on（ ‘click’， function（） {
if（ $item.data（ ‘isExpanded’ ） ） {
return false;
}
$item.data（ ‘isExpanded’， true ）;
// save current index of the item
current = $item.index（）;
var layoutProp = getItemLayoutProp（ $item ），
clipPropFirst = ‘rect（’ + layoutProp.top + ‘px ’ + （ layoutProp.left + layoutProp.width ） + ‘px ’ + （ layoutProp.top + layoutProp.height ） + ‘px ’ + layoutProp.left + ‘px）’，
clipPropLast = ‘rect（0px ’ + winsize.width + ‘px ’ + winsize.height + ‘px 0px）’;
$overlay.css（ {
（编辑：佛山站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
