武林網(wǎng)(www.survivalescaperooms.com)文章簡介：在上周的文章里提到過要做個CSS3動畫效果，因為最近一直在用蝦米網(wǎng)聽音樂，看到他們家首頁那個flash的top banner設(shè)計的不錯，于是突發(fā)奇想試用CSS3也制作一款差不多效果的相片墻，不過一些功能目前CSS還是無法支持，只能通過腳本來實現(xiàn)了，但整個作品的動畫和構(gòu)思都是通
在上周的文章里提到過要做個CSS3動畫效果，因為最近一直在用蝦米網(wǎng)聽音樂，看到他們家首頁那個flash的top banner設(shè)計的不錯，于是突發(fā)奇想試用CSS3也制作一款差不多效果的相片墻，不過一些功能目前CSS還是無法支持，只能通過腳本來實現(xiàn)了，但整個作品的動畫和構(gòu)思都是通過CSS3來完成的，效果我也想當(dāng)滿意，ie8以下不支持，ie8部分支持，其他高級瀏覽器都沒問題，我在demo里添加了上篇文章的瀏覽器支持圖標(biāo)表，一起來看下制作過程吧。View Demo
Step1. HTML代碼
<div id="demo"><div class="col"><div class="big todos-thumb"><p><img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" sizcache009759341109038932="6">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"); }); });另外為了豐富相片墻的表現(xiàn)力，我添加了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
新聞熱點
疑難解答
