顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

10.31.2008

IE7-JS

看來似乎是個針對 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.01.2008

Javascript in Modern Web Design

Web Designer Wall一次介紹多款目前最流行的Javascript的相關應用,Dojo、jQuery、MooTools、Prototype..等,實際應用範圍從照片展示、Tooltips到Switcher等應有盡有,可以好一段時間都不用再Google半天還找不到心目中想要的效果了。

Javascript in Modern Web Design

4.21.2008

Lightview 介紹

幾個特色先介紹一下


  • 展開圖檔未於視窗中間的絕對位置,即使視窗上下滑動也不會跑掉。

  • 圖組自動載入,因此可提高閱覽速度。

  • 樣是皆已經訂作好,即使不懂CSS也沒關係。

  • 視窗四角的圓弧為PNG檔,容易更改。

  • 自動調整圖片大小以適應視窗。

  • 使用最新版 Prototype 1.6。

  • 自動輪撥功能。

  • 適用於任何瀏覽器。



實際效果請至Lightview官網或筆者工作室網站作品集頁面觀看。

安裝



首先下載 Prototype 1.6.0.2Scriptaculous 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官網 說明。

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

4.03.2008

Best Of March 2008

Smashing Magazine 這篇文章收錄三月份最佳數位繪圖、網頁技術等相關網站,實用性相當高,其中 iCarousel 部分更是讓人躍躍欲試,多種 Ajax, Javascript 的運用技術並不難學,有機會一定要來好好試試。

Best Of March 2008

11.13.2007

IE Png背景透明

IE怪事真不少,這是其中一樁。PNG格式圖檔在IE底下背景無法呈現應有的透明,這是利用JS的解決方式:

下載correctPNG.js
在<head>與</head>之間宣告後即可。

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>