看來似乎是個針對 IE 瀏覽器種種問題一勞永逸的方案。IE7-JS 是個 JavaScript library,主要功能是修正 IE (主要針對IE5+) 行為,讓 IE 看起來就像個支援網頁標準的瀏覽器,其中幾個重點是讓 IE6 支援 PNG、支援 max-(width、height), min-(width、height)、支援:hover..等等,詳細列表可參考官方文件。
使用方法只需將js載入即可
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
或是針對IE5-7
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->
當然也可以下載至本地使用。
比較美中不足的地方,是要使用 PNG 效果的話,圖檔名稱後方必須加 *-trans.png,另外在頁面載入時仍會出現短暫的"原始面貌"。
10.31.2008
IE7-JS
Posted: underfire at 01:14 0 comment Tag: Application, CSS, JavaScript
10.01.2008
Javascript in Modern Web Design
Web Designer Wall一次介紹多款目前最流行的Javascript的相關應用,Dojo、jQuery、MooTools、Prototype..等,實際應用範圍從照片展示、Tooltips到Switcher等應有盡有,可以好一段時間都不用再Google半天還找不到心目中想要的效果了。
Javascript in Modern Web Design
Posted: underfire at 14:49 0 comment Tag: Application, JavaScript
4.21.2008
Lightview 介紹
幾個特色先介紹一下
- 展開圖檔未於視窗中間的絕對位置,即使視窗上下滑動也不會跑掉。
- 圖組自動載入,因此可提高閱覽速度。
- 樣是皆已經訂作好,即使不懂CSS也沒關係。
- 視窗四角的圓弧為PNG檔,容易更改。
- 自動調整圖片大小以適應視窗。
- 使用最新版 Prototype 1.6。
- 自動輪撥功能。
- 適用於任何瀏覽器。
實際效果請至Lightview官網或筆者工作室網站作品集頁面觀看。
安裝
首先下載 Prototype 1.6.0.2 、Scriptaculous 1.8.1,以及 Lightview 2.2.6 ,將prototype-1.6.0.2.js更名為prototype.js,並將scriptaculous-js-1.8.1.zip src裡的js檔以及prototype.js置於js資料夾底下。
於head之間加入以下程式碼
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/lightview.js'></script>
使用
使用方式與 lightbox 大同小異,比較不一樣的是多了 class='lightview' 的屬性。
非群組狀況
<a href='image.jpg' class='lightview'>My image</a>
群組狀態須在rel後加入群組名稱 rel='gallery[setname]'
<a href='image1.jpg' class='lightview' rel='gallery[myset]'>Image 1</a>
<a href='image2.jpg' class='lightview' rel='gallery[myset]'>Image 2</a>
如要使用說明文字,再加進title屬性即可,
<a href='leopard.jpg' title='A title' class='lightview' >Leopard</a>
<a href='gazelle.jpg' title='This image has a title :: And a caption' class='lightview'>Gazelle</a>
可連結其他頁面,同時自定義視窗大小或加入其他參數
<a href='http://www.google.com' rel='iframe' title='Google :: :: fullscreen: true'
class='lightview' >Google</a>
<a href='http://www.yahoo.com' rel='iframe' title='Yahoo :: A caption :: width: 800, height: 600'
class='lightview' >Yahoo</a>
其它部分請參考 Lightview官網 說明。
Posted: underfire at 21:24 1 comment Tag: JavaScript
60 More AJAX- and Javascript..
Smashing Magazine 介紹60款最新 AJAX 與 Javascript 相關的技術,有些部分很新奇,但對視覺設計者而言並非那麼的實用,目前只找到一個 LightBox 進階版 Lightview ,除了一般的圖檔之外,尚支援Quicktime、Iframe、SWF等等,目前工作室作品集已改成這款更精緻的Code。
60 More AJAX- and Javascript Solutions For Professional Coding
Posted: underfire at 19:17 0 comment Tag: JavaScript
4.03.2008
Best Of March 2008
Smashing Magazine 這篇文章收錄三月份最佳數位繪圖、網頁技術等相關網站,實用性相當高,其中 iCarousel 部分更是讓人躍躍欲試,多種 Ajax, Javascript 的運用技術並不難學,有機會一定要來好好試試。
Best Of March 2008
Posted: underfire at 18:06 0 comment Tag: Appreciation, JavaScript, Tutorials
11.13.2007
IE Png背景透明
IE怪事真不少,這是其中一樁。PNG格式圖檔在IE底下背景無法呈現應有的透明,這是利用JS的解決方式:
下載correctPNG.js在<head>與</head>之間宣告後即可。
Posted: underfire at 00:30 1 comment Tag: Download, JavaScript
11.12.2007
連結文字捲動
(轉)
仿效Flash。下方連結為示範效果,同時下載JS檔案。(備註:IE7底下無法正常顯示)
下載檔案
<head>
<script type="text/javascript" src="scrollovers.js"></script>
<style type="text/css">
<!--
a.scrollover {color: #D28533;}
a.scrollover em:first-line {color: #67D233;}
</style>
</head>
<body>
<a href="#" class="scrollover" type="scrollover">Alfie's blog</a>
</body>
Posted: underfire at 04:15 0 comment Tag: Download, JavaScript
