DIV CSS 佈局教程網

文章簡介：在上周的文章裡提到過要做個CSS3動畫效果，因為最近一直在用蝦米網聽音樂，看到他們家首頁那個Flash的top banner設計的不錯，於是突發奇想試用CSS3也制作一款差不多效果的相片牆，不過一些功能目前CSS還是無法支持，只能通過腳本來實現了，但整個作品的動畫和構思都是通在上周的文章裡提到過要做個CSS3動畫效果，因為最近一直在用蝦米網聽音樂，看到他們家首頁那個Flash的top banner設計的不錯，於是突發奇想試用CSS3也制作一款差不多效果的相片牆，不過一些功能目前CSS還是無法支持，只能通過腳本來實現了，但整個作品的動畫和構思都是通過CSS3來完成的，效果我也想當滿意，ie8以下不支持，IE8部分支持，其他高級浏覽器都沒問題，我在demo裡添加了上篇文章的浏覽器支持圖標表，一起來看下制作過程吧。

VIEw Demo

Step1. Html代碼

<div id="demo">     <div class="col">         <div class="big todos-thumb">         <p><img src=/School/UploadFiles_7810/201603/20160324102156649.gif" data-src=/School/UploadFiles_7810/201603/20160324102156474.gif" alt="monaco see">         <span class="todos-thumb-span">monaco see</span>         </p>         </div>     </div><!-- col1 -->     <div class="col col1">         <div class="big todos-thumb">         <p><img src=/School/UploadFiles_7810/201603/20160324102156649.gif" data-src=/School/UploadFiles_7810/201603/20160324102156149.gif" alt="the flower">         <span class="todos-thumb-span">the flower</span>         </p>         </div>     </div><!-- col2 -->     <div class="col col2">         <div class="big todos-thumb">         <p><img src=/School/UploadFiles_7810/201603/20160324102156649.gif" data-src=/School/UploadFiles_7810/201603/20160324102156322.gif" alt="Chapel Bridge">         <span class="toDOS-thumb-span">Chapel Bridge</span>         </p>         </div>     </div><!-- col3 --> </div><!-- demo -->

Step2. CSS樣式

.col{ 	position: absolute; 	border-right:none; 	z-index:1; 	left:0; } .col1{ 	left: 51px; } .col2{ 	left: 102px; } .col3{ 	left: 153px; } .line { 	margin-top:51px; } .active {  	z-index: 10; 	opacity: 1; } .big:hover, .small:hover{   background:white; } .big{overflow: hidden; padding:1px;} .big p {   width: 50px;   height: 50px;   line-height:1.3;   z-index: 10;   transition: all 0.2s ease-out;   position: relative;   cursor: pointer; } .big .icon-font{   float:left; } .big p img {  	width:50px;  	height:50px; 	float:left; } .lock-thumb .icon-font{   margin-left:25%; } .todos-thumb {  	background: rgb(255,255,255,0.1); } .todos-thumb:hover {  	background: #2FB1BE; 	color: #FFFFFF; 	box-shadow: 0 0 2px #333; } .col .todos-thumb {  	z-index:10; } .todos-thumb-span{ 	display: block; 	padding-left: 5em; } .todos-thumb p span{ 	width: 150px; 	padding-top: 5px; 	font-size: 1.2em; } .toDOS-thumb:hover p{ 	margin-right: 200px; }

Step3. 插入腳本

$(document).ready(function(){ 	$("#demo .col").mouseenter(function(){ 		$(this).addClass("active"); 		$(".active").siblings().CSS("opacity", "0.4"); //除了加載到.active樣式以外都改變其opacity 	}); 	$("#demo .col").mouseleave(function(){ 		$(this).removeClass("active"); 		$("#demo .col").CSS("opacity", "1"); 	}); });

另外為了豐富相片牆的表現力，我添加了img load效果，用的是一款unveil的jQuery插件,使用方法為下:

<script type="text/Javascript" src="js/jquery.unveil.min.JS"></script> <script> $(function() { 	$("#demo img").unveil(300); //id為demo下的所有img圖片 }); </script>

Download