FancyZoom 圖片網頁內容平滑的浮動於當前頁顯示
 |
| FancyZoom 1.1 圖片浮出展示 |
使用方法：
第一步 載入 FancyZoom 需要用到的 JavaScript 檔案
<!-- FancyZoom 的程式碼 -->
<script src="/js-global/FancyZoom.js" type="text/javascript"></script>
<script src="/js-global/FancyZoomHTML.js" type="text/javascript"></script>
第二步 使用 HTML 寫入圖片的列表
<div class="photoblock-many">
<a href="http://www.cabel.name/images-post/2008/02/mwsf-2.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-2-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-2" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-14.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-14-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-14" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-5.jpg" title="Whoah: first Jollibee, then Cha-Am Express, now Jollibee again?">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-5-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-5" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-6.jpg" title="Not recommended.">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-6-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-6" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-16.jpg" title="But I did get this sweet TV PLUG-IN GAME. Neighborhood Smash = Karateka, by the way.">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-16-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-16" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-20.jpg" title="Oh, kids today!">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-20-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-20" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-21.jpg" title="The Metreon gets weirder, as the Microsoft Store is now Tilt's crane game ghost town.">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-21-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-21" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-25.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-25-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-25" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-27.jpg" title="Patrick Salo gave us cookies, just because he likes our software. Hooray Macworld!">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-27-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-27" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-28.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-28-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-28" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-29.jpg" title="Mary Blair artwork in person = wow.">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-29-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-29" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-30.jpg" title="Secret Moscone Tunnels!">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-30-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-30" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-31.jpg" title="Like playing Half-Life, only with less crates to smash.">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-31-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-31" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-24.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-24-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-24" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-4.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-4-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-4" class="photo" />
</a>
<a href="http://www.cabel.name/images-post/2008/02/mwsf-9.jpg">
<img src="http://www.cabel.name/images-post/2008/02/mwsf-9-thumb.jpg" width="161" height="123" border="0" alt="" id="img-mwsf-9" class="photo" />
</a>
</div>
第三步 設計圖片框框的 CSS 樣式
.photoblock { /* Basic block, inline, w/caption fonts. */
font-size: 11px;
color: #888888;
margin-right: 10px;
display: inline-block;
}
.photoblock-left { /* A photo block on the left */
margin: 0 10px 10px -4px;
font-size: 10px;
color: #888888;
float: left;
}
.post-body .photoblock-left a {
color: #555555;
background-image: none;
text-decoration: underline;
}
.photoblock-right { /* Photo block on the.. gasp.. right */
margin: 0px 0px 10px 10px;
font-size: 11px;
color: #888888;
float: right;
text-align: right;
}
.post-body .photoblock-right a {
color: #555555;
background-image: none;
text-decoration: underline;
}
.photoborder { /* Apply to an image to give it a border */
border: 1px solid #ccc;
padding: 1px;
}
a:hover .photoborder {
border: 1px solid #888;
}
.photoblock-many { /* A general full-width photo block (that clears), for many thumbnails */
margin: 0 10px 10px -4px;
clear: both;
width: 100%;
text-align: center;
font-size: 10px;
color: #888888;
}
.photoblock-many a { /* (Need clear links in the photo block) */
background: white;
}
.photoborder-right { /* A photo with a border on the right */
border: 1px solid #ccc;
padding: 1px;
margin: 0px 0px 10px 10px;
float: right;
}
.photo { /* A normal photo */
padding: 3px;
vertical-align: middle;
}
.post-footer img {
vertical-align: -20%;
/* border: 1px black solid; */
}
第四步 在 Body 的標籤上加上啟動程式的函式
<body [...] onload="setupZoom();">
作者網站：http://www.cabel.name
檔案大小：53.3 KB
檔案下載：http://www.cabel.name/files/FancyZoom%201.1.zip
檔案備份：下載
0 意見