| 最近文章 |
| 星期二 九月 13, 2011 馬老師部落格搬新家 星期日 十一月 15, 2009 PNG去背與IE相容性問題 星期六 十一月 14, 2009 免費的3D迴轉Flash相簿（flShow） 星期五 十一月 13, 2009 網站圖示的製作方式 |
| 最近迴響 |
Re: 網站圖示的製作方式 by 小樂 (八月 23, 2010) |
光箱特效（LightBox2）
今天馬老師來介紹一個網頁上面的光箱特效（LightBox2）
在網頁上我們常常會製作一個小圖，點選之後可以連結到大圖，以往多半都用另開視窗的方式
但是這樣的做法比較不好看，這次的光箱特效就是來製做這樣連結的效果
如果還是搞不太清楚的話，剛好我這邊有一個範例網頁可讓大家先睹為快
進入頁面後可以點選下面有三個菜色的圖片，你就會發現這麼做實在比開啟視窗來的好看多了！
接下來就來講解一下製作方法，首先必須要下載幾個必備的資料檔（共有三個資料夾）
然後將他們複製到製作網頁的資料夾中，如下圖：
將下來製作兩張圖片（一張為小縮圖、一張則是此大張的圖片，可參考下圖）
接下來利用Dreamweaver將縮圖置放於頁面後，直接製作超連結到大圖即可
接下來將以下的語法新增餘網頁<head>....</head>內：
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
另外在超連結標籤內增加：「rel="lightbox[roadtrip]"」的語法即可
Filed under 網頁設計 |
0 迴響 |
Permalink
| 評分： |
|
得分: 0.0/ 投票數: 0 |