首頁(P1)

Flex練習

一、page1.html:Flex練習

範例結果

<div id="FlexBlock">
    <h3>最新上架</h3>
        <ul class="flexbox">
            <li><p>瓦力</p></li>
            <li><p>勇敢傳說</p></li>
            <li><p>天外奇蹟</p></li>
            <li><p>獅子王</p></li>
            <li><p>怪物史瑞克</p></li>
            <li><p>白雪公主與小矮人</p></li>
        </ul>
</div>

CSS參考:Flex屬性Flex佈局selector選取器

/*===Flex練習==========================================================================*/
body,html{ height:100vh; width:100vw;}
#FlexBlock{ height:100%; background:#e3f2fd;}
			
.flexbox{width:80%;  background:#FBC0C1; height:80%;
		display:flex; margin:0 auto; align-items:center;
		}
.flexbox li{flex:1; transition:all .5s; 
			box-shadow:-1px 0px 3px #000000; position:relative; cursor:pointer; height:80%;
			display:flex;} 
.flexbox li:hover{ flex:12;}

.flexbox li:nth-child(1){background:url(../images/home/home01.jpg) center center; background-size:cover;}
.flexbox li:nth-child(2){background:url(../images/home/home02.jpg) center center; background-size:cover;}
.flexbox li:nth-child(3){background:url(../images/home/home03.jpg) center center; background-size:cover;}
.flexbox li:nth-child(4){background:url(../images/home/home04.jpg) center center; background-size:cover;}
.flexbox li:nth-child(5){background:url(../images/home/home05.jpg) center center; background-size:cover;}
.flexbox li:nth-child(6){background:url(../images/home/home06.jpg) center center; background-size:cover;}
	
.flexbox li p{ background:#FBA0A2; margin:auto auto 20px; transition:all .5s;
			 line-height:30px; border-radius:10px; text-align:center; background:rgba(255,255,255,0.67);
			 box-shadow:1px 1px 3px #000000; width:90%; }

JQ參考:each()方法animate()方法jQuery動畫說明Dom結構關係

$('.flexbox li').each(function() {
	$(this).hover(
		function(){
			$(this).children().animate({width:'80%'}).parents().siblings().children().css('opacity',0);
		},function(){
			$(this).children().animate({width:'90%'}).parents().siblings().children().css('opacity',1);
		});
//	alert(targetLeft);
});