最新上架(P1)

Flex練習

一、page1.html:Flex練習

範例結果

S1:html結構

  <h2>首頁</h2>
<h3>最新上架</h3>
<ul class="flexbox">
<li>
<div class="title">瓦力</div>
<p>公元2805年,人類文明高度發展,卻因污染和生活垃圾大量增加使得地球不再適於人類居住。地球人被迫乘離開故鄉,進行漫長無邊宇宙之旅。<br>
臨行前委託Buynlarge的公司對地球垃圾進行清理,該公司開發了名為WALL·E的機器人擔當此重任。 <br>
這些機器人按照程序日復一日、年復一年辛勤工作,WALL·E們接連損壞、停止運動。最後只有一個仍在進行這項似乎永無止境的工作...</p>
</li>
<li>
<div class="title">勇敢傳說</div>
<p>勇敢的梅莉達抗爭傳統束縛,追求自由從而改變自己命運。<br>
梅莉達是佛格國王與艾莉諾皇后的長女,她是一名出色的弓箭手,也有任性不羈,《勇敢傳說》講述的就是她的冒險故事。</p>
</li>
<li>
<div class="title">天外奇蹟</div>
<p>78歲高齡、喪偶的Carl,終其一生都希望與老婆Ellie去探險,然而一直到老婆去世都沒機會完成心願。<br>
在即將被送進養老院之時,他有個瘋狂的想法──用無數氫氣球讓房子變成飛行器,飛去完成老婆的願望,沒想到一個9歲的陌生小男孩卻意外一起困在房子...</p>
</li>
<li>
<div class="title">獅子王</div>
<p>當年辛巴的父親木法沙被奸人迫害而死,小辛巴為了躲過一劫,逃離了動物王國。<br>
辛巴在叢林中慢慢長大,最終長成了雄壯的雄獅,並邂逅了自己美麗的公主。由於有了丁滿和彭彭這對活寶,使得平凡的生活也笑料百出。</p>
</li>
<li>
<div class="title">怪物史瑞克</div>
<p>史萊克生活在平凡的世界中——他本身是一個其貌不揚的怪物,綠色的身體,古怪的脾氣,不愛乾淨的懶散生活。在殘暴的國王還掠奪了一個美麗非凡的公主,打算強佔為妻。<br>
史萊克雖說醜陋,卻心內善良。在領主的威逼下,無奈下他只能前去搭救公主,他能不能闖過難關,上演完美的英雄救美童話?</p>
</li>
<li>
<div class="title">白雪公主與小矮人</div>
<p>白雪公主原本是世界上最幸福的人,可惜當她母后逝去,父王娶了她繼母后,這一切都改變了。<br>
這天,皇后從魔鏡中得知世上最美的人不是自己而是白雪公主後,氣急敗壞的她下令武士將她帶到森林處決了...</p>
</li>
</ul>

S2:利用Flex進行排版美化

SCSS美化

SCSS @for 循環【參考連結

for循環有兩種形式,分別為:@for $var from through 和@for $var from to 。
$i表示變量,start表示起始值,end表示結束值,這兩個的區別是關鍵字through表示包括end這個數,而to則不包括end這個數。

.flexbox{
// background: #f0ff90; border: 1px solid red;
display: flex;
width: 90%; height: 60vh; margin: 20px auto;
li{
// border: 1px solid blue;
box-shadow: -1px 0 3px #000;
flex: 1;
@for $i from 1 through 6{
&:nth-child(#{$i}){
background: url(../images/p1/flex0#{$i}.jpg);
background-size: cover;
}
}  //for end
.title{
font-size: 1.1em; padding: 10px;
color: #fff; text-shadow: 1px 1px #000;      
}
p{
display: none;
}
&.open{
flex: 12;
}
}  //li end
}  //flexbox end

S3:Flexbox li 打開時,【.title】改為橫向、【p】置於li 中央

直書CSS參考:【參考1】、【參考2

SCSS美化

.flexbox{
overflow: hidden; /* S5原因 */
li{
display: flex;  /* S3原因 */
position: relative;   /* S5原因 */
.title{
// S1:直書
writing-mode: vertical-rl;    /* 直書 */
}
p{
display: none;
// S5:置於 li 正中央
text-align: left; font-size: .9em;
background: rgba(255, 255, 255, 0.521);
box-shadow: 1px 1px 3px #000;
border-radius: 20px;
padding: 20px;
width: 80%;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
}
&.open{
.title{
// S2:li打開時,改為橫向
writing-mode: lr-tb;    /* 橫書 */
// writing-mode: horizontal-tb;
// S3:改為橫書時,.title 置於下方
align-self: flex-end;
// S4:置於下方後,置中設定
text-align: center;  flex: 1;
// background: rgba(255, 255, 255, 0.462);    /* 測試寬度用 */
}
}
}  //li end
}  //flexbox end

S4:JQ設定

S4-1:在html結構中,將p動畫改變方向的元素,在其父元素【li】中加入【class=”toLeft”】或【class=”toTop”】

    <ul class="flexbox">
<li class="toLeft">
<div class="title">瓦力</div>
<p>...</p>
</li>
<li class="toTop">
<div class="title">勇敢傳說</div>
<p>...</p>
</li>
</ul>

S4-1:CSS預設美化

.flexbox{
li{
cursor: pointer; 
transition: all .5s;
p{
display: none;
// left: 50%; top: 50%;   /* 移除,利用加class預設位置 */  
transform: translate(-50%,-50%);
}
&.open{
p{
display: block;
}
} //li.open end
&.toLeft p{
top: 50%; left: 200%;
}
&.toTop p{
top: 200%; left: 50%;
}
}  //li end
}  //flexbox end

S4-1:JQ參考: is( ) 方法animate()方法jQuery動畫說明selectors選取器

    $('.flexbox li').click(function(){
// S1:click li時 新增【.open】其餘則移除
$(this).addClass('open').siblings().removeClass('open');
// S2:有【.toTop】則p向上移動,否則向左移動
if($(this).is('.toTop')){
$(this).children('p').animate({top:'50%'},1000);
}else{
$(this).children('p').animate({left:'50%'},1000);
}
//  S3:li未打開,則回到原位
$('.flexbox li:not(.open)').children('p').css({top:'',left:''});
});
// S4:移除html結構中,預設有【.open】刪除,利用程式啟動
$('.flexbox li:last-child').click();